{"componentChunkName":"component---src-templates-post-js","path":"/blog/workpad-part-2","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🌋 WebIDE 的开发记录其二（核心架构）","tips":[],"categories":["webide"],"datetime":"2020-01-12 22:23:32","noFooter":false,"description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。","plainTextDescription":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='179'%3e%3cpath%20d='M227%207a642%20642%200%200176%201l75-1v5h-24l-25-1h-1a239%20239%200%2001-51%200c0%202-49%202-49%200-1-1-1%200-1%202%200%203%200%203%201%202%202-3%2048-3%2049%200h1c2-3%2048-3%2049%200h2c2-3%2047-3%2049%200%201%201%201%200%201-5%200-4%200-6-1-5a2067%202067%200%2001-151%202M21%208c0%201%200%202%201%201l26-1c25%200%2026%200%2026%202s-2%204-2%202h-1c0%202-49%202-49%200l-1%201v3l1-1%2025-1c21%200%2024%200%2024%202l-8%201-9%201H19l-3%201c-1%200-2%200-1%201l1%2015-1%2015v1c2%200%202%2035%200%2035v1a379%20379%200%20011%2064c1%202%200%203-3%203h-2V87a516%20516%200%20010-68%20515%20515%200%20010%2068l-2%2067c-1%201%201%201%203%201l5%201-1%201v2l11%201h10v-6c0-6%200-7%202-7%201-1%201-1-1-1s-2%200-2%206v5H22v-20h22V92h-8v35l1-17V93h6v43H22v-7h6l7-1H22V87h37l1%203v-1c-1-7-1-7-5-7-3%200-3%200-3-2s1-3%202-3c2-1%202-16%200-17-5-1%200-7%205-7l1-4c1-4%200-5-1-2v3H29l1-6-1-10c-1-5-1-5-1-2%200%204%200%204-3%204-4%200-5-6%200-6%202%200%203-1%203-5%200-5%200-5%203-5l8-1h5l-1%204-1%204h-6c-5%200-3%201%208%201h14v-4c0-6%202-5%202%201l1%205h10v4c0%204%200%205-2%205v1l1%207c0%205%200%206%202%206s2-1%202-11l1-11h2v-1c-2%200-2-1-2-8v-8h23l23%201c0%201-2%202-7%203-8%200-7%202%202%202h3v16l-1%2017c-5%200-6%200-6%203%200%202%200%202%207%202%204%200%206%200%205-1-2%200-2-1-2-12V34h4l3-1%202-2%201-1v-3c1-1%200-3-2-4l-2-2%207-1c8-1%2021-1%2031%201%205%200%205%200%205%204%200%203%200%203-3%203s-3%200-3-4l-1-3v7h-9c-5%200-7%201-4%201%204%200%204%200%203%203-1%204-1%204%204%206%204%201%204%201%204%206v4h-8l-7%201h17v4c0%203%201%204%203%204l3-1-2-1c-3%200-3%200-3-3s0-3%203-3h3v20h-37l-1-3-1-1c0%202-1%202-5%202-9%200-8-3-8%2035v34h-11v-12l-3%201-3%201h1c3%200%203%200%203%205%200%208%200%208%207%208h6v15h-6c-1%201%200%201%203%201s3%200%203%202c-1%202%201%205%203%205v-1l-2-3h4v-19h14v-7c0-6%200-6%203-6h2l-4-1c-2%200-3%200-3%205v6h-12V72h12v8h24v-8h11v64h-11v-6c0-6%200-6-3-5-2%201-2%201%200%201s2%200%202%207v6h12v9c0%208%200%209%202%209s2%200%202-2l-1-70V17h-13c-18%201-39%200-39-2s49-2%2049%200c1%201%201%200%201-1%200-2%200-3-1-2a230%20230%200%2001-50%200l-23%201H75V8h48l48%201c1%201%201%200%201-1%200-2%200-3-1-2A2040%202040%200%200121%208m204%2010l-2%201c-1%200-2%200-1%201%202%200%202%2030%200%2030v2c2%200%202%2034%200%2034v1a416%20416%200%20011%2068l2%201%209%201c9%200%209%200%209%203l2%202h6c7%201%2011%200%2011-2s1-3%209-3l9-1v-11l1-9%205-1c6%200%206%200%206-2l-1-19V98h-5l-5-1%205-1h5V86h-5l-6-1c-2-3-4%200-4%206%200%205%200%206-2%205-2%200-2%200%200%201%205%203%205%206-1%206h-3v18l1%206h3c3%200%203%200%203%203v24h-16v3c0%203%200%203-3%203-2%200-2%200-2-2v-3c-1-1-1%200-1%202%200%203%200%203-3%203-2%200-2%200-2-2v-3c-1-1-1%200-1%202%200%203%200%203-2%203-3%200-3%200-3-3v-3h-16v-20h3c4%200%204%200%204-4%200-3%201-3%204-3s4-1%202-3h-1l-3%201c-2%200-3%201-3%204%200%204%200%204-3%204s-3%200-3-3c0-4%200-4%203-4s3%200%203-5v-4l-1%204c0%203%200%204-2%204s-2-1-2-4%200-4%202-4l2-1-2-1c-2%200-2-1-2-4s0-4%202-4%202%201%202%204l1%204%202%202c1%202%201%203%202%202%203-1%206%202%206%205v3l1-1%201-5c0-3%200-3-4-5-5-1-5-1-5-5v-4h15v18h-3l-3%201h7v-10c0-11%200-11-10-11h-7l-1-3c0-4%200-4-3-4s-4-1-4-3%200-2%2014-2h15v-3c0-3%200-3%204-3s5%200%205-2c1-3%200-3-4-3-3%200-3%200-3-2s1-3%202-3c2%200%202-1%202-8%200-8%200-9-2-9l-2-2c0-2%201-3%202-3l2-1%201-1c1%200%202-1%202-3v-2c-1%202-2%202-20%202h-18v-3c0-2%200-2%204-2s5%200%205-2c1-2-1-4-5-4-4%201-4%201-4-3v-3h13V21h-7l-6-1h15v11l1%2013%201-7v-7h10v-4l-1-5v4c0%204%200%204-3%204-4%200-4%200-4-3l1-4c1-1%201-1-1-1-1%200-2%201-2%203-1%203-1%203-1%200l1-4%204-1c4%200%204%200%203%201-2%201-2%202-1%202l2-1c1-2%202-2%206-1h12c6%201%209%203%203%203-2%200-3%201-3%206%200%207%201%208%204%208%201-1%202%200%202%201l-1%201-3%201c-1%201-1%201%201%201%202-1%202%200%202%205l1%2010%201%203h37v-3c0-2%200-3-1-2%200%202-1%202-7%202h-6V45h-19v6l-1%205-1-15%201-15%2010-1c10%200%2010%200%2010-3l1-2%201%205v4h20v-4c0-4%200-5%202-5l1%2013c0%2012%200%2012-2%2012-1%200-2%200-1%201l1%204c0%207%201%209%204%209%202-1%204-2%202-2l-1-4c0-4%200-4%203-4s3%201%203-17V20h5l7-1c1%200%202%200%201%204l1%204%202%202%204%201%203-1%201-2c2%200%203-2%202-5v-2h17v4c0%203%200%203-4%203s-4%200-4%204v3h-17v21h17v8l1-4c0-3%201-4%204-4s3%200%203%203c0%204%200%204-4%204l-3%201h3c4%200%204%200%204%203v3h-38v-2c0-2%200-2-1-1%200%202-1%202-6%202-6%200-7%201-7%203%200%203%201%204%208%203%205%200%205%200%205%203v2l1-4c0-2%200-2%205-2s5%200%205%203l1%204h27v4c0%204%200%204-4%204s-4%200-4%204v3h-8l-5%201c4%200%204%200%204%204s0%204%204%206c4%201%204%202%204%206v4h-8l-7%201h16v4c0%203%200%203%204%203h4v9h-49v-21h3l4-2%201-1%201-1c2-2%201-5-1-7s-2-2-2%204c0%205-1%206-3%206s-3-1-3-6v-6h3l4-1h-7v-6c0-7%200-7%203-7l4-2-2-1-5%202h-3v19h-8l3%201c4%200%204%200%204%205%200%204-1%205-2%203l-3-1c-1%200-2-1-2-4l-1%208v11h4c4%200%205%201%205%203%200%203%200%203-7%203l-14%201-8%201%209%201h19v9c0%209%200%2010%203%2010%202%200%202-1%202-9v-9h6l8-1h8l16%201h10v8l1%209c2%201%202-3%202-68V17h-10a568%20568%200%2001-80%201h-66m-10%202a1653%201653%200%20012%20135c3%200%203%200%202-1-2-1-2-5-2-67s0-66%202-67c1-1%201-1-2-1-2%200-3%200-2%201m-38%201l1%2019-1%2018v1c1%201%202%2035%200%2036l-1%201%201%201c1-1%202%2022%201%2044v16h5c2%200%204%200%203-1l-1-67%201-68c1-1-1-1-4-1-4%200-6%200-5%201m207%200l1%2025-1%2024v2c2%201%201%2036-1%2036v1c2%200%202%202%202%2023l-1%2024c-1%201%200%201%204%201l5-1h-1l-1-67%201-68c1-1-1-1-4-1s-5%200-4%201m-204%201a3626%203626%200%20011%2037c-2%201-2%2035%200%2036v2a476%20476%200%2000-1%2057c0%202%202%202%203%201V23c0-2-3-3-3-1m149%2013v13h5V21h-5v14m57%2010l1%2025v2c-2%201-1%2036%201%2036v1c-2%200-2%202-2%2024%200%2021%200%2023%202%2023%201-1%202-5%202-68%200-66%200-67-2-67s-2%201-2%2024M105%2027c-6%200-7%201-7%203l-2%202c-3%201-3%207%200%208l2%202c1%204%2014%204%2015%200l2-2c3-1%203-7%200-8l-2-2c0-3-2-4-8-3m-4%205c-2%200-2%201-2%204v4h13v-8l-5-1-6%201m253%2013v9h15v-4c0-4%200-4-5-6-4-1-4-1-4-5%201-4%201-4-2-4h-4v10M228%2069c0%2015%200%2016%205%2014%203-1%203-2%203-6l-1-6-2-2%202-3%201-6v-5h-4l-4-1v15M22%2070l1%2014%203-2c2%200%203-9%201-10l-1-4%201-2%201-5c0-6%200-6-3-6h-3v15m98%2033c0%2025%201%2032%202%2033l1-32-1-29-1%203v-3l-1%2028m17-27v3h22v-6h-22v3m214%200v2h27v-5h-27v3M70%2090l-1%207v1c2%200%202%201%202%209s0%209-2%209l-2-2c-1-3-7-3-8%200l-2%202c-2%200-3%201-3%208s0%207%202%207%203%201%203%202l4%202%204-2%202-2c2%200%202%201%202%2013v13H59v-5c0-6%200-6-2-6l-4%201h5v13h16v-21h5c7%200%207%200%207-8%200-5%200-5%203-5h2l-4-1-3-1v12H74v-26c0-25%200-26-2-26s-2%201-2%206m-53%2023l1%2026%201-26-1-26-1%2026m212-24c0%202%200%203%2013%203s14-1%2014-3%200-2-13-2c-14%200-14%200-14%202m-89%208c0%202%200%202%208%202%209%200%2012%202%2011%207v3l1-3%201-4%201%204v3c2-1%202-7%200-8-3%200-6-3-6-5%200-3-6-3-8%200h-1c0-2-1-2-3-2-4%200-4%200-4%203m142%208c0%205%200%205%203%205l3%201h-3c-3%200-3%200-3%205v4h8v-4l-1-5v-1l1-6v-4h-8v5m13%206l-1%204v1l1%205v4h8v-18h-4c-4%200-4%200-4%204M59%20124v6h4c4%200%205%200%204-2h1c2%202%202%202%202-1%200-2%200-3-1-2h-1v-3h1c1%201%201%200%201-1%200-3-1-4-7-4h-4v7m168%2043c0%203%200%205%201%204l75-1%2075%201c1%201%201-1%201-4%200-4%200-5-1-4a230%20230%200%2001-51%200%20230%20230%200%2001-50%200c0%202-49%202-49%200-1-1-1%201-1%204m-156-2c-1%201-47%202-49%201-1-1-2%203-1%207a1361%201361%200%2001151%200c1-4%200-10-1-8a243%20243%200%2001-50%200%20250%20250%200%2001-50%200m157%202c0%202%201%202%2075%202%2070%200%2074-1%2075-2%200-2-2-2-24-2l-25%201h-1l-24-1-25%201h-2l-25-1c-23%200-24%200-24%202m-152%201l-4%201h-1l-24-1c-22%200-25%200-25%202l75%201%2074-1a185%20185%200%2000-50-1c0-1-37-2-45-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.2311827956989245,"src":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/f11f5/ground-design.jpg","srcSet":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/9e575/ground-design.jpg 500w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/79449/ground-design.jpg 1000w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/f11f5/ground-design.jpg 1245w","srcWebp":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/7843f/ground-design.webp","srcSetWebp":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/7fe04/ground-design.webp 500w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/d619e/ground-design.webp 1000w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/7843f/ground-design.webp 1245w","sizes":"(max-width: 1245px) 100vw, 1245px"}}},"bannerCredit":"\\[图文无关\\]","slug":"/blog/workpad-part-2","tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器","NOVUS","状态管理"]},"headings":[{"value":"一. 扩展机制 （Extension）","depth":2},{"value":"二、数据层（数据驱动机制 Novus + 核心数据）","depth":2},{"value":"2.1 dva","depth":3},{"value":"2.2 自研数据层 Novus","depth":3},{"value":"2.3 核心数据","depth":3},{"value":"三. 基本 UI 框架 （render）","depth":2},{"value":"四. 命令机制 （Command）","depth":2},{"value":"想法","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"workpad-part-2\",\n \"title\": \"🌋 WebIDE 的开发记录其二（核心架构）\",\n \"date\": \"2020-01-12 22:23:32\",\n \"author\": \"Ubug\",\n \"description\": \"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。\",\n \"series\": \"WebIDE 的开发记录\",\n \"categories\": [\"webide\"],\n \"tags\": [\"思考\", \"整理\", \"WorkPad\", \"WebIDE\", \"云开发\", \"在线编辑器\", \"NOVUS\", \"状态管理\"],\n \"banner\": \"./ground-design.jpg\",\n \"bannerCredit\": \"\\\\[图文无关\\\\]\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"\\u57FA\\u7840\\u67B6\\u6784\\u5C31\\u662F\\u5B9E\\u73B0\\u4EC0\\u4E48\\u6838\\u5FC3\\u529F\\u80FD\\uFF0C\\u642D\\u5EFA\\u4E00\\u4E2A\\u4EC0\\u4E48\\u6837\\u7684\\u63A5\\u53E3\\uFF0C\\u5B9A\\u4E49\\u4EC0\\u4E48\\u6837\\u7684\\u6269\\u5C55\\u5F00\\u53D1\\u65B9\\u5F0F\\u3002\\u6838\\u5FC3\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\u5F88\\u591A\\uFF0C\\u6211\\u9009\\u62E9\\u7684\\u4E5F\\u5E76\\u4E0D\\u662F\\u6700\\u4F18\\u89E3\\uFF0C\\u53EA\\u662F\\u8FD9\\u4E2A\\u9879\\u76EE\\u7684\\u5B9E\\u73B0\\uFF0C\\u6700\\u540E\\u7ED3\\u679C\\u81F3\\u5C11\\u8FD8\\u4E0D\\u9519\\uFF0C\\u4E0B\\u9762\\u4ECE\\u4E09\\u4E2A\\u65B9\\u9762\\u8BF4\\u4E00\\u4E0B\\u901A\\u7528\\u7684\\u5C42\\u9762\\u505A\\u4E86\\u54EA\\u4E9B\\u5DE5\\u4F5C\\u3002\"), mdx(\"h2\", null, \"\\u4E00. \\u6269\\u5C55\\u673A\\u5236 \\uFF08Extension\\uFF09\"), mdx(\"p\", null, \"\\u6BCF\\u4E2A extension \\u91CC\\u9762\\u90FD\\u6309\\u7167\\u6807\\u51C6\\u63A5\\u53E3\\u5B9A\\u4E49\\uFF0C\\u6CE8\\u518C\\u6570\\u636E\\u6A21\\u578B\\u3001UI \\u6E32\\u67D3\\u548C\\u547D\\u4EE4\\u673A\\u5236\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u3010\\u6570\\u636E\\u6A21\\u578B\\u3011\\u9700\\u8981\\u5BF9\\u6269\\u5C55\\u5185\\u7684\\u5168\\u90E8\\u6570\\u636E\\u8FDB\\u884C\\u7BA1\\u7406\\uFF0C\\u5305\\u62EC\\u7F51\\u7EDC\\u6570\\u636E\\u8BF7\\u6C42\\u672C\\u5730\\u6570\\u636E\\u66F4\\u65B0\\u7B49\\uFF1B\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u3010UI \\u6E32\\u67D3\\u3011\\u9700\\u8981\\u6839\\u636E\\u5168\\u5C40\\u7684\\u6570\\u636E\\u6A21\\u578B\\u548C\\u672C\\u6269\\u5C55\\u6570\\u636E\\uFF0C\\u5728 pannel \\u91CC\\u9762\\u6E32\\u67D3\\u5177\\u4F53\\u7684\\u754C\\u9762\\uFF1B\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u3010\\u547D\\u4EE4\\u673A\\u5236\\u3011\\u662F\\u6CE8\\u518C\\u5230\\u5168\\u5C40\\u7684\\u547D\\u4EE4\\u51FD\\u6570\\uFF0C\\u53EF\\u4EE5\\u5728\\u4EFB\\u4F55\\u5730\\u65B9\\u88AB\\u8C03\\u7528\\uFF0C\\u6267\\u884C\\u4E00\\u7CFB\\u5217\\u52A8\\u4F5C\\u6765\\u4FEE\\u6539\\u6570\\u636E\\u6A21\\u578B\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u4E09\\u4E2A\\u673A\\u5236\\u80FD\\u591F\\u4FDD\\u8BC1\\u6570\\u636E\\u7684\\u6B63\\u5E38\\u6D41\\u8F6C\\uFF0C\\u5F88\\u591A\\u8FD9\\u6837\\u7684\\u6269\\u5C55\\u5B8C\\u6210\\u4E86\\u6574\\u4E2A\\u5927\\u9879\\u76EE\\u7684\\u66F4\\u65B0:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u7528\\u6237\\u64CD\\u4F5C\\u6267\\u884C\\u547D\\u4EE4 -> \\u547D\\u4EE4\\u4FEE\\u6539\\u6570\\u636E\\u6A21\\u578B -> \\u6570\\u636E\\u6A21\\u578B\\u54CD\\u5E94\\u5F0F\\u7684\\u901A\\u77E5 UI \\u5C42\\u6E32\\u67D3\"))), mdx(\"p\", null, \"\\u8FD9\\u4E09\\u4E2A\\u57FA\\u7840\\u67B6\\u6784\\u7684\\u5F00\\u53D1\\uFF0C\\u53CD\\u590D\\u63A8\\u6572\\u82B1\\u4E86\\u4E00\\u4E9B\\u65F6\\u95F4\\uFF0C\\u4F46\\u662F\\u540E\\u7EED\\u7684\\u6574\\u4E2A\\u5F00\\u53D1\\u6A21\\u5F0F\\u66F4\\u52A0\\u6E05\\u695A\\uFF0C\\u529F\\u80FD\\u7684\\u6DFB\\u52A0\\u90FD\\u662F\\u6C34\\u5E73\\u6269\\u5C55\\uFF0C\\u80FD\\u6548\\u66F4\\u9AD8\\uFF0C\\u800C\\u4E14\\u4E3A\\u4E4B\\u540E\\u7684\\u63D2\\u4EF6\\u673A\\u5236\\u63D0\\u4F9B\\u4E86\\u5F88\\u597D\\u7684\\u5207\\u5165\\u70B9\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u6570\\u636E\\u5C42\\uFF08\\u6570\\u636E\\u9A71\\u52A8\\u673A\\u5236 Novus + \\u6838\\u5FC3\\u6570\\u636E\\uFF09\"), mdx(\"p\", null, \"\\u5927\\u578B\\u9879\\u76EE\\u4E2D\\u4E00\\u4E2A\\u96C6\\u4E2D\\u6570\\u636E\\u9A71\\u52A8\\u7684\\u673A\\u5236\\u662F\\u975E\\u5E38\\u6709\\u5FC5\\u8981\\u7684\\uFF0C\\u7EC4\\u4EF6\\u4F17\\u591A\\u3001\\u4EA4\\u4E92\\u590D\\u6742\\u3001\\u914D\\u7F6E\\u7E41\\u591A\\uFF0C\\u6240\\u4EE5\\u5C06\\u9A71\\u52A8\\u7684\\u6570\\u636E\\u90E8\\u5206\\u62BD\\u53D6\\u51FA\\u6765\\uFF0C\\u6309\\u7167\\u6A21\\u5757\\u5212\\u5206\\u5F52\\u7F6E\\uFF0C\\u5355\\u4E00\\u6570\\u636E\\u6E90\\uFF0C\\u5E76\\u4EE5\\u6B64\\u6784\\u5EFA\\u9A71\\u52A8\\u66F4\\u65B0\\u673A\\u5236\\u3002\"), mdx(\"h3\", null, \"2.1 \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"dva\")), mdx(\"p\", null, \"react \\u751F\\u6001\\u4E2D\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"redux\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mobx\"), \" \\u90FD\\u662F\\u5F88\\u4F18\\u79C0\\u7684\\u65B9\\u6848\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"redux\"), \" \\u5F00\\u53D1\\u6A21\\u5F0F\\u6574\\u4E2A\\u592A\\u6A21\\u677F\\u5316\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mobx\"), \" \\u4E0D\\u592A\\u719F\\u6089\\uFF0C\\u6240\\u4EE5\\u8003\\u8651\\u518D\\u4E09\\u4F7F\\u7528\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dva\"), \" \\u4F5C\\u4E3A\\u6570\\u636E\\u5C42\\u7B2C\\u4E00\\u7248\\u3002\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dva\"), \" \\u5C01\\u88C5\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"redux\"), \" \\u65B9\\u6848\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"model\"), \" \\u4E00\\u4E2A\\u6570\\u636E\\u4E2D\\u5FC3\\u5904\\u7406\\u5404\\u4E2A\\u6982\\u5FF5\\uFF0C\\u7406\\u89E3\\u548C\\u4E66\\u5199\\u4E0A\\u90FD\\u597D\\u7684\\u591A\\u3002\"), mdx(\"p\", null, \"\\u6570\\u636E\\u5C42\\u672C\\u8EAB\\u662F\\u4F7F\\u7528\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dva\"), \"\\uFF0C\\u8DB3\\u591F\\u7B80\\u5355\\u548C\\u6E05\\u6670\\uFF0C\\u5176\\u4E2D \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"model\"), \" \\u7684\\u6982\\u5FF5\\u975E\\u5E38\\u597D\\uFF0C\\u80FD\\u5B9A\\u4E49\\u72B6\\u6001\\u548C\\u72B6\\u6001\\u76F8\\u5173\\u7684\\u53D8\\u66F4\\u903B\\u8F91\\uFF0C\\u4E00\\u65B9\\u9762\\u57FA\\u7840\\u67B6\\u6784\\u51E0\\u4E2A\\u6570\\u636E\\u6A21\\u5757\\u53EF\\u4EE5\\u4F7F\\u7528\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u6269\\u5C55\\u673A\\u5236\\u7684\\u6BCF\\u4E00\\u4E2A extension \\u4E5F\\u5206\\u522B\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"model\"), \"\\uFF0C\\u7EDF\\u4E00\\u7BA1\\u7406\\u6570\\u636E\\u548C\\u65B9\\u6CD5\\uFF0C\\u7B80\\u76F4\\u5B8C\\u7F8E\\u3002\"), mdx(\"p\", null, \"\\u4F8B\\u5982\\u72B6\\u6001\\u680F\\u6269\\u5C55\\u7684\\u652F\\u6301\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u72B6\\u6001\\u680F\\u7684\\u6570\\u636E\\u6A21\\u578B\\nimport React, { ComponentClass, FunctionComponent } from 'react';\\nimport { Model } from 'dva';\\n\\nexport type TStatusConfig = {\\n com: string | ComponentClass | FunctionComponent;\\n command?: string | boolean;\\n position?: 'left' | 'right';\\n order?: number,\\n id?: string;\\n}\\n\\nexport interface IFormState {\\n statusPool: { [index: string]: TStatusConfig };\\n}\\n\\nconst model: Model = {\\n namespace: 'statusBar',\\n state: {\\n statusPool: {}\\n } as IFormState,\\n effects: {\\n *register({ payload }, { call, put, select }) {\\n const statusPool = yield select(state => state.statusBar.statusPool);\\n yield put({ type: 'save', payload: { statusPool: {...statusPool, [payload.id]: payload.widget} }});\\n },\\n *unregister({ payload }, { call, put, select }) {\\n const names = payload;\\n const statusPool = yield select(state => state.statusBar.statusPool);\\n names.forEach((name: string) => {\\n if (statusPool[name]) delete statusPool[name];\\n });\\n yield put({ type: 'save', payload: { statusPool: { ...statusPool } } });\\n },\\n },\\n reducers: {\\n save(state, action) {\\n return { ...state, ...action.payload };\\n },\\n },\\n};\\n\\nexport default model;\\n\\n// \\u5728 connect \\u51FD\\u6570\\u4E2D mapDispatchToProps \\u540E\\u8C03\\u7528\\nthis.props.dispatch({\\n type: 'statusBar/register',\\n payload: {\\n id: 'helloworld',\\n widget: () => (Hello World!
)\\n }\\n});\\n\")), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u53EF\\u80FD\\u56E0\\u4E3A\\u6211 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"redux\"), \" \\u7528\\u7684\\u4E0D\\u591A\\uFF0C\\u6216\\u8005\\u7528\\u7684\\u4E0D\\u5BF9\\uFF0C\\u6216\\u8005\\u662F\\u65E9\\u8D77\\u7248\\u672C\\uFF0C\\u611F\\u89C9 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dva\"), \" \\u4F7F\\u7528\\u4E2D\\u6709\\u5F88\\u591A\\u4E0D\\u987A\\u624B\\u7684\\u5730\\u65B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5F88\\u591A\\u6982\\u5FF5\\u7279\\u6027\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"put\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"call\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"payload\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"action\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"dispatch\"), \" \\u7B49\\u903B\\u8F91\\u4E00\\u4E2A\\u6CA1\\u5C11\\uFF0C\\u800C\\u4E14\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"action type\"), \" \\u5B57\\u7B26\\u4E32\\u6216\\u8005\\u5E38\\u91CF\\u7C7B\\u578B\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"payload\"), \" \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7EE7\\u627F\\u81EA \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"redux-saga\"), \" \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Generator\"), \" \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Iterator\"), \" \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"effects\"), \"\\uFF0C\\u7528\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"yield *\"), \" \\u5F02\\u6B65\\u5904\\u7406\\u65B9\\u5F0F\\u3002\\u4E0D\\u4E60\\u60EF\\u3001\\u4E0D\\u559C\\u6B22\\uFF1B\")), mdx(\"p\", null, \"\\u56E0\\u4E3A\\u8FD9\\u4E9B\\u539F\\u56E0\\uFF0C\\u5728\\u540E\\u671F\\u5168\\u9762\\u8F6C\\u5411 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"TypeScript\"), \" \\u65F6\\uFF0C\\u4E00\\u76F4\\u60F3\\u628A\\u8FD9\\u5757\\u66FF\\u6362\\u6389\\u3002\"), mdx(\"h3\", null, \"2.2 \\u81EA\\u7814\\u6570\\u636E\\u5C42 \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"Novus\")), mdx(\"p\", null, \"\\u6570\\u636E\\u5C42\\u7684\\u9700\\u6C42\\u4E00\\u822C\\u4E5F\\u5F88\\u7B80\\u5355\\uFF0C\\u5C31\\u662F\\u80FD\\u50A8\\u5B58\\u3001\\u80FD\\u6539\\u53D8\\u3001\\u80FD\\u54CD\\u5E94\\u57FA\\u672C\\u4E0A\\u5C31\\u53EF\\u4EE5\\u4E86\\u3002\\u8003\\u8651\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dva\"), \" \\u4E0D\\u987A\\u624B\\u7684\\u5730\\u65B9\\u548C\\u7B80\\u5355\\u9700\\u6C42\\u540E\\u81EA\\u5DF1\\u5F00\\u53D1\\u66FF\\u6362\\u4E86\\u6570\\u636E\\u62BD\\u8C61\\u5C42\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, \"\\u66F4\\u8BE6\\u7EC6\\u7684\\u5B9E\\u73B0\\u8BF7\\u770B \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/novus\"\n }, \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"), \"\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4E2D\\u5305\\u62EC\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"dva \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"router\"), \" \\u7684\\u4F7F\\u7528\\u5904\\u7406\\u591A\\u9875\\u9762\\u6570\\u636E\\u76D1\\u542C\\uFF0C\\u4E0E\\u76EE\\u524D\\u9879\\u76EE\\u7684\\u6570\\u636E\\u5C42\\u4E0D\\u592A\\u76F8\\u5173\\uFF0C\\u800C\\u4E14\\u9700\\u6C42\\u7B80\\u5355\\uFF0C\\u76F4\\u63A5\\u5206\\u79BB\\u6210\\u7EC4\\u4EF6\\uFF0C\\u76D1\\u542C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"hashChange\"), \" \\u4E8B\\u4EF6\\u6E32\\u67D3\\u4E0D\\u540C\\u754C\\u9762\\u5373\\u53EF\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6570\\u636E\\u6E90 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"state\"), \" \\u6309\\u7167\\u903B\\u8F91\\u96C6\\u4E2D\\u6570\\u636E\\uFF0C\\u80FD\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ts type\")), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u80FD\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"action\"), \" \\u65B9\\u6CD5\\u6539\\u53D8 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"state\")), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E0D\\u9700\\u8981 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"devtool\"), \" \\u7BA1\\u7406\\u5386\\u53F2\\uFF0C\\u6CA1\\u6709\\u65F6\\u95F4\\u6F2B\\u6E38\\u7684\\u9700\\u6C42\\uFF0C\\u4E5F\\u4E0D\\u523B\\u610F\\u5F3A\\u8C03\\u4FEE\\u6539\\u72B6\\u6001\\u903B\\u8F91\\u7684\\u5E72\\u51C0\\u3001\\u7B80\\u5355\\uFF0C\\u6240\\u4EE5\\u4E0D\\u7279\\u610F\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"reducer\"), \" \\u6982\\u5FF5\\uFF0C\\u907F\\u514D\\u8BED\\u6CD5\\u5570\\u55E6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E0D\\u7279\\u610F\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"reducer\"), \"\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u53EF\\u4EE5\\u5C01\\u88C5 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"setState\"), \" \\u4E3A\\u7EAF\\u51FD\\u6570\\u7684\\u5904\\u7406\\u6765\\u5B9E\\u73B0 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"reducer\"), \" \\u76F8\\u4F3C\\u7684\\u529F\\u80FD\\uFF0C\\u8FD9\\u91CC\\u56E0\\u4E3A\\u5BF9\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u4E0D\\u523B\\u610F\\u5F3A\\u8C03\\uFF0C\\u6240\\u4EE5\\u4E0D\\u9884\\u8BBE\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u80FD\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"connect\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"useHooks\"), \" \\u65B9\\u6CD5\\u54CD\\u5E94\\u6570\\u636E\\u7684\\u53D8\\u5316\\u901A\\u77E5\\uFF0C\\u4ECE\\u800C\\u6E32\\u67D3\\u7EC4\\u4EF6\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6700\\u5927\\u7684\\u9A71\\u52A8\\u662F\\u80FD\\u591F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ts\"), \" \\u7684\\u7C7B\\u578B\\u9650\\u5236\\u548C\\u63A8\\u65AD\\uFF0C\\u81EA\\u52A8\\u63D0\\u793A\\u6570\\u636E\\u7684\\u8BBF\\u95EE\\u548C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"action\"), \" \\u7684\\u53C2\\u6570\\u548C\\u8FD4\\u56DE\\u3002\")), mdx(CodeWithPreview, {\n codes: [{\n name: \"novus-example.ts\",\n code: novusExampleStr1\n }, {\n name: \"novus-example.tsx\",\n code: novusExampleStr\n }],\n withTitle: true,\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u7528\\u8D77\\u6765\\u8FD8\\u662F\\u633A\\u8212\\u670D\\u7684\\uFF0C\\u96C6\\u4E2D\\u5F0F\\u7684 state \\u7BA1\\u7406\\uFF0C\\u53EF\\u63A8\\u65AD\\u7684\\u6570\\u636E\\u548C\\u65B9\\u6CD5\\uFF0C\\u6CA1\\u90A3\\u4E48\\u591A\\u7EA6\\u5B9A\\uFF0C\\u5728\\u5B9E\\u73B0\\u4E0A\\u533A\\u5206\\u526F\\u4F5C\\u7528\\u548C\\u72B6\\u6001\\u7B49\\u3002\\u5F53\\u7136\\u65E0\\u8BBA\\u7528\\u4EC0\\u4E48\\u65B9\\u6848\\u90FD\\u4E0D\\u662F\\u91CD\\u70B9\\uFF0C\\u91CD\\u70B9\\u662F\\u6709\\u4E00\\u4E2A\\u6570\\u636E\\u9A71\\u52A8\\u7EC4\\u4EF6\\u7684\\u673A\\u5236\\u3002\"), mdx(\"h3\", null, \"2.3 \\u6838\\u5FC3\\u6570\\u636E\"), mdx(\"p\", null, \"\\u4E0A\\u4E24\\u8282\\u8BF4\\u4E86\\u9A71\\u52A8\\u7684\\u673A\\u5236\\uFF0C\\u90A3\\u4E48\\u5177\\u4F53\\u54EA\\u4E9B\\u5462\\uFF1F\\u521A\\u5F00\\u59CB\\u53EA\\u5B9A\\u4E49\\u4E86\\u4EE5\\u4E0B\\u51E0\\u4E2A\\u6838\\u5FC3\\u7684\\u6570\\u636E\\u6A21\\u578B\\uFF1A\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"name\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"desc\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"layout\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"[\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u89C6\\u56FE\\u914D\\u7F6E\\u7684\\u6570\\u636E\\u652F\\u6301\\uFF0C\\u6E32\\u67D3\\u754C\\u9762\\u4E3B\\u8981\\u7ED3\\u6784\\uFF0C\\u4E3B\\u8981\\u662F UI \\u603B\\u7BA1\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"statusBar\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"[\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u5E95\\u90E8\\u72B6\\u6001\\u680F\\u7684\\u6570\\u636E\\u652F\\u6301\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"menu\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"[\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u83DC\\u5355\\u680F\\u548C\\u53F3\\u952E\\u83DC\\u5355\\u7684\\u6570\\u636E\\u652F\\u6301\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"workspace\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"[\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u6574\\u4F53\\u7684\\u5E03\\u5C40\\u548C\\u5404\\u4E2A\\u6269\\u5C55\\u7684\\u754C\\u9762\\u63D2\\u69FD\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"os\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"[\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u9879\\u76EE\\u914D\\u7F6E\\u3001\\u57FA\\u7840\\u4FE1\\u606F\\u7B49\\uFF0C\\u7528\\u6765\\u63D0\\u4F9B\\u6700\\u57FA\\u672C\\u9879\\u76EE\\u4FE1\\u606F\\u3001\\u5BB9\\u5668\\u4FE1\\u606F\\u7B49\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"fileManager\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u9879\\u76EE\\u6587\\u4EF6\\u6811\\u548C\\u6587\\u4EF6\\u7684\\u6570\\u636E\\u6A21\\u578B\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"gitManager\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u9879\\u76EE git \\u4FE1\\u606F\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"output\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u5168\\u90E8\\u7684\\u8C03\\u8BD5\\u548C\\u8F93\\u51FA\\u4FE1\\u606F\\u6570\\u636E\\u6A21\\u578B\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"writer\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u7528\\u6237\\u6253\\u5F00\\u7684\\u6587\\u4EF6\\u6570\\u636E\\u7BA1\\u7406\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"pluginManager\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u5916\\u56F4\\u975E\\u6838\\u5FC3\\u63D2\\u4EF6\\u7684\\u6570\\u636E\\u6A21\\u578B\")))), mdx(\"p\", null, \"\\u8FD9\\u51E0\\u4E2A\\u6570\\u636E\\u6A21\\u578B\\uFF0C\\u63CF\\u8FF0\\u4E86\\u6700\\u57FA\\u7840\\u7684\\u529F\\u80FD\\u652F\\u6491\\uFF0C\\u914D\\u5408\\u6570\\u636E\\u5F00\\u53D1\\u51FA\\u5E03\\u5C40 UI \\u548C\\u6837\\u5F0F\\uFF0C\\u5269\\u4E0B\\u7684\\u5C31\\u662F\\u5728\\u6846\\u67B6\\u4E0A\\u6DFB\\u52A0\\u9AD8\\u7EA7\\u529F\\u80FD\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E09. \\u57FA\\u672C UI \\u6846\\u67B6 \\uFF08render\\uFF09\"), mdx(\"p\", null, \"IDE \\u7684\\u6846\\u67B6\\u548C\\u4E00\\u822C\\u7684\\u5E03\\u5C40\\u4E0D\\u592A\\u76F8\\u540C\\uFF0C\\u66F4\\u503E\\u5411\\u4E8E\\u4E00\\u4E2A\\u684C\\u9762\\u5E94\\u7528\\uFF0C\\u89C6\\u56FE\\u4E0A\\u6709\\u83DC\\u5355\\u680F\\u3001\\u72B6\\u6001\\u680F\\u529F\\u80FD\\uFF0C\\u6709\\u591A\\u4E2A\\u533A\\u57DF\\u5212\\u5206\\uFF0C\\u5176\\u4E2D\\u8FD8\\u6709 tab \\u548C\\u5BF9\\u5E94\\u7684 panel\\u3002\\u6240\\u4EE5\\u754C\\u9762\\u5E03\\u5C40\\u4E0A\\u7684\\u5B9E\\u73B0\\u8D39\\u4E86\\u70B9\\u7CBE\\u529B\\uFF0C\\u5C24\\u5176\\u521A\\u5F00\\u59CB\\u60F3\\u5B9E\\u73B0\\u6BD4\\u8F83\\u7075\\u6D3B\\u7684\\u5E03\\u5C40\\u5F62\\u5F0F\\uFF0C\\u4F46\\u662F\\u7531\\u4E8E\\u6570\\u636E\\u548C\\u4EA4\\u4E92\\u7684\\u8D39\\u529B\\u5BFC\\u81F4\\u96BE\\u5EA6\\u4E0A\\u5347\\uFF0C\\u800C\\u4E14\\u786E\\u5B9E\\u6CA1\\u6709\\u5FC5\\u8981\\u3002\\u6700\\u540E\\u6572\\u5B9A\\u4E00\\u4E2A\\u65B9\\u6848\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"menu \\u9876\\u90E8\\u83DC\\u5355\\u680F\\uFF0C\\u5C55\\u793A\\u6240\\u6709\\u7684\\u529F\\u80FD\\u5206\\u7C7B\\u548C\\u5217\\u8868\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"layout\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"left + right + bottom + dealer\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"stack\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"panel + tab\\uFF08extensions / plugin \\u63A5\\u7BA1\\uFF09\"))))))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"statusBar \\u5E95\\u90E8\\u72B6\\u6001\\u680F\\uFF0C\\u7528\\u6765\\u5C55\\u793A\\u5177\\u4F53\\u72B6\\u6001\\u6570\\u636E\\u529F\\u80FD\")), mdx(\"p\", null, \"\\u6BCF\\u4E00\\u4E2A\\u754C\\u9762\\u4E0A\\u7684\\u529F\\u80FD\\u548C\\u663E\\u793A\\u90FD\\u662F\\u88AB layout \\u7684\\u6570\\u636E\\u9A71\\u52A8\\uFF0C\\u6BCF\\u4E00\\u4E2A panel \\u7684\\u89C6\\u56FE\\u5360\\u4F4D\\u90FD\\u7531\\u57FA\\u7840\\u6846\\u67B6\\u7BA1\\u7406\\uFF0C\\u7136\\u540E\\u7684\\u6269\\u5C55\\u548C\\u63D2\\u4EF6\\u53EA\\u9700\\u8981\\u8D1F\\u8D23 panel \\u7684\\u5185\\u5BB9\\u548C\\u4EA4\\u4E92\\u5B9A\\u4E49\\u5373\\u53EF\\u3002\\u8FD9\\u6837\\u5927\\u5927\\u964D\\u4F4E\\u4E86\\u529F\\u80FD\\u548C\\u754C\\u9762\\u5E03\\u5C40\\u7684\\u8026\\u5408\\u3002\"), mdx(\"p\", null, \"\\u975E\\u5E38\\u7C7B\\u4F3C\\u73B0\\u5728\\u7684\\u5FAE\\u670D\\u52A1\\u7684\\u6982\\u5FF5\\uFF0C\\u53EA\\u662F\\u8FD9\\u91CC\\u9762\\u7684\\u670D\\u52A1\\u652F\\u6301\\u5E76\\u4E0D\\u9700\\u8981\\u533A\\u5206\\u7684\\u90A3\\u4E48\\u6E05\\u695A\\uFF0C\\u8FD8\\u662F\\u6709\\u4E00\\u4E9B\\u6570\\u636E\\u4EA4\\u4E92\\u548C\\u4F9D\\u8D56\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u56DB. \\u547D\\u4EE4\\u673A\\u5236 \\uFF08Command\\uFF09\"), mdx(\"p\", null, \"commands \\u8D1F\\u8D23\\u63D0\\u4F9B\\u4E00\\u4E2A\\u52A8\\u4F5C\\u6CE8\\u518C\\u3001\\u50A8\\u5B58\\u548C\\u89E6\\u53D1\\u7684\\u673A\\u5236\\uFF0C\\u662F\\u4E00\\u4E2A\\u53EF\\u4EE5\\u5168\\u5C40\\u89E6\\u53D1\\u7684\\u529F\\u80FD\\u5217\\u8868\\uFF0C\\u4E5F\\u662F\\u53C2\\u8003 VSCode \\u7684 action \\u4E00\\u4E2A\\u6A21\\u5F0F\\uFF0C\\u8FD9\\u91CC\\u548C\\u6570\\u636E\\u6A21\\u578B\\u7684\\u52A8\\u4F5C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"action\"), \" \\u907F\\u514D\\u6DF7\\u4E71\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Command\"), \" \\u5173\\u952E\\u8BCD\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u4E0B\\u9762\\u8FD9\\u4E2A\\u5B9E\\u4F8B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import { novus } from '@novus';\\n\\nconst { layoutModel, fileManagerModel } = novus.models;\\n\\nexport const commands = {\\n openNewTab: {\\n trigger: () => {\\n layoutModel.actions.openPanel(\\\"fileManager\\\");\\n }\\n },\\n copyFile: {\\n label: \\\"\\u590D\\u5236\\\",\\n trigger: () => {\\n const file = fileManagerModel.state.onContextMenuFile;\\n if (file) {\\n fileManagerModel.actions.setStates({ copyPool: file });\\n updateContextMenu(file);\\n }\\n }\\n },\\n pasteFile: {\\n label: \\\"\\u7C98\\u8D34\\\",\\n when: () => {\\n return !!fileManagerModel.state.copyPool;\\n },\\n trigger: async () => {\\n const {onContextMenuFile, copyPool} = fileManagerModel.state;\\n const {isDir, relative, parent} = onContextMenuFile;\\n if (onContextMenuFile && copyPool) {\\n const targetDir = isDir ? relative : (parent === \\\".\\\" ? \\\"/\\\" : parent);\\n await fileManagerModel.actions.copyTo(copyPool.relative, targetDir);\\n }\\n }\\n },\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u547D\\u4EE4\\u7684\\u8981\\u6C42\\u6BD4\\u8F83\\u4E25\\u683C\\uFF0C\\u5C3D\\u91CF\\u53EA\\u80FD\\u8C03\\u7528\\u6570\\u636E\\u6A21\\u578B\\u7684\\u65B9\\u6CD5\\uFF0C\\u5C5E\\u4E8E\\u6570\\u636E\\u7684\\u9A71\\u52A8\\u90E8\\u5206\\u3002\\u6574\\u4E2A\\u9879\\u76EE\\u5185\\u8FD9\\u79CD\\u547D\\u4EE4\\u4E0A\\u767E\\u4E2A\\uFF0C\\u57FA\\u672C\\u6DB5\\u76D6\\u4E86\\u7528\\u6237\\u7684\\u64CD\\u4F5C\\u548C\\u54CD\\u5E94\\u5F0F\\u7684\\u65B9\\u6CD5\\u7B49\\u3002\"), mdx(\"p\", null, \"\\u547D\\u4EE4\\u672C\\u8EAB\\u6709\\u56FA\\u5B9A\\u7684\\u6267\\u884C\\u6D41\\u7A0B\\uFF0C\\u6BD4\\u5982\\u53EF\\u4EE5\\u5B9A\\u4E49\\u547D\\u4EE4\\u7684\\u3010\\u524D\\u7F6E\\u6761\\u4EF6\\u3011\\uFF0C\\u8FBE\\u4E0D\\u5230\\u524D\\u7F6E\\u6761\\u4EF6\\u5C06\\u4E0D\\u80FD\\u6267\\u884C\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"commandsPool.dashboard.openNewTab.trigger()\\n// \\u7B49\\u540C\\u4E8E\\u7C7B\\u4F3C\\u65B9\\u6CD5\\ncommandsManager.trigger('dashboard/openNewTab')\\n\")), mdx(\"p\", null, \"actions \\u662F\\u547D\\u4EE4\\u5F0F\\u673A\\u5236\\u7684\\u50A8\\u5B58\\u5730\\u65B9\\uFF0C\\u63D0\\u4F9B\\u7684\\u529F\\u80FD\\u975E\\u5E38\\u7B80\\u5355\\uFF0C\\u4F46\\u662F\\u5374\\u9A71\\u52A8\\u4E86\\u6574\\u4E2A\\u9879\\u76EE\\u8FD0\\u884C\\u3002\"), mdx(\"h2\", null, \"\\u60F3\\u6CD5\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6709\\u65F6\\u5019\\u4E00\\u4E2A\\u673A\\u5236\\u3001\\u6A21\\u5F0F\\u5E76\\u4E0D\\u662F\\u5F88\\u590D\\u6742\\u7684\\u63D0\\u4F9B\\u5F88\\u591A\\u529F\\u80FD\\uFF0C\\u5F88\\u53EF\\u80FD\\u53EA\\u662F\\u4E00\\u4E2A\\u7EA6\\u5B9A\\uFF0C\\u7EA6\\u5B9A\\u6309\\u7167\\u4EC0\\u4E48\\u6570\\u636E\\u7ED3\\u6784\\u548C\\u65B9\\u6CD5\\u50A8\\u5B58\\u548C\\u8C03\\u7528\\uFF0C\\u914D\\u5957\\u63D0\\u4F9B\\u51E0\\u4E2A\\u64CD\\u4F5C\\u51FD\\u6570\\u53EF\\u80FD\\u5C31\\u80FD\\u5728\\u5176\\u4E0A\\u642D\\u5EFA\\u4E0A\\u5C42\\u4E86\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E1A\\u5185\\u4F18\\u79C0\\u7684\\u6846\\u67B6\\u548C\\u89E3\\u51B3\\u65B9\\u6848\\u5F88\\u591A\\uFF0C\\u4F46\\u662F\\u5B9E\\u9645\\u9879\\u76EE\\u4F7F\\u7528\\u7684\\u65F6\\u5019\\u8FD8\\u662F\\u8D81\\u624B\\u7684\\u66F4\\u597D\\u7528\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6BCF\\u4E2A\\u4EA7\\u54C1\\u90FD\\u6709\\u6838\\u5FC3\\u529F\\u80FD\\u548C\\u5916\\u56F4\\u529F\\u80FD\\uFF0C\\u4E8B\\u5148\\u8BBE\\u8BA1\\u3001\\u9884\\u7559\\u8BBE\\u8BA1\\u7A7A\\u95F4\\u80FD\\u591F\\u65B9\\u9762\\u4EE5\\u540E\\u6301\\u7EED\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u590D\\u6742\\u9879\\u76EE\\u9700\\u8981\\u5148\\u89E3\\u8026\\uFF0C\\u5404\\u4E2A\\u4F9D\\u8D56\\u548C\\u6A21\\u5757\\u9700\\u8981\\u8BBE\\u8BA1\\u7EC4\\u5408\\u8D77\\u6765\\u7684\\u6A21\\u5F0F\\uFF0C\\u624D\\u80FD\\u8BA9\\u9879\\u76EE\\u590D\\u6742\\u5EA6\\u6C34\\u5E73\\u6269\\u5F20\\u3002\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"9a4bdb5c-4762-505d-b16f-1486fcb53e52","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/workpad/workpad-part-3.md","id":"6317de7e-38c0-57da-8793-840a407a4d8a","parent":{"name":"workpad-part-3","sourceInstanceName":"blog"},"excerpt":"一方面说怎么集成 monaco-editor 到项目中，另一方面怎么用扩展的形式加入新功能。 PS: 本文集成 monaco-editor 不是普遍适用的，包含很多针对当前项目的集成，所以仅供参考。 一、monaco-editor 是什么？ monaco-editor 是一个非常优秀的代码编辑器，大名鼎鼎的 VSCode 的编辑器内核，有非常强大的 IDE 功能支持。也正是有了这个优秀的工具才让浏览器编辑器成为了现实。 monaco-editor 准确的讲是从 VSCode…","fields":{"title":"🌋 WebIDE 的开发记录其三（editor 集成）","slug":"/blog/workpad-part-3","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。","date":"2020-01-19","redirects":null,"datetime":"2020-01-19 21:00:41","categories":["webide"],"series":"WebIDE 的开发记录","tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"status":"online"},"frontmatter":{"published":null,"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"theme":null,"slug":"workpad-part-3","date":"2020-01-19 21:00:41"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"workpad-part-3\",\n \"title\": \"🌋 WebIDE 的开发记录其三（editor 集成）\",\n \"date\": \"2020-01-19 21:00:41\",\n \"author\": \"Ubug\",\n \"description\": \"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。\",\n \"series\": \"WebIDE 的开发记录\",\n \"categories\": [\"webide\"],\n \"tags\": [\"思考\", \"整理\", \"WorkPad\", \"WebIDE\", \"云开发\", \"在线编辑器\"],\n \"banner\": \"./WorkPad-demo.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"\\u4E00\\u65B9\\u9762\\u8BF4\\u600E\\u4E48\\u96C6\\u6210 monaco-editor \\u5230\\u9879\\u76EE\\u4E2D\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u600E\\u4E48\\u7528\\u6269\\u5C55\\u7684\\u5F62\\u5F0F\\u52A0\\u5165\\u65B0\\u529F\\u80FD\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u672C\\u6587\\u96C6\\u6210 monaco-editor \\u4E0D\\u662F\\u666E\\u904D\\u9002\\u7528\\u7684\\uFF0C\\u5305\\u542B\\u5F88\\u591A\\u9488\\u5BF9\\u5F53\\u524D\\u9879\\u76EE\\u7684\\u96C6\\u6210\\uFF0C\\u6240\\u4EE5\\u4EC5\\u4F9B\\u53C2\\u8003\\u3002\")), mdx(\"h2\", null, \"\\u4E00\\u3001monaco-editor \\u662F\\u4EC0\\u4E48\\uFF1F\"), mdx(\"p\", null, \"monaco-editor \\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u4F18\\u79C0\\u7684\\u4EE3\\u7801\\u7F16\\u8F91\\u5668\\uFF0C\\u5927\\u540D\\u9F0E\\u9F0E\\u7684 VSCode \\u7684\\u7F16\\u8F91\\u5668\\u5185\\u6838\\uFF0C\\u6709\\u975E\\u5E38\\u5F3A\\u5927\\u7684 IDE \\u529F\\u80FD\\u652F\\u6301\\u3002\\u4E5F\\u6B63\\u662F\\u6709\\u4E86\\u8FD9\\u4E2A\\u4F18\\u79C0\\u7684\\u5DE5\\u5177\\u624D\\u8BA9\\u6D4F\\u89C8\\u5668\\u7F16\\u8F91\\u5668\\u6210\\u4E3A\\u4E86\\u73B0\\u5B9E\\u3002\"), mdx(\"p\", null, \"monaco-editor \\u51C6\\u786E\\u7684\\u8BB2\\u662F\\u4ECE VSCode \\u7684\\u6E90\\u7801\\u4E2D\\u5355\\u72EC\\u62BD\\u79BB\\u51FA\\u6765\\u80FD\\u591F\\u76F4\\u63A5\\u5728\\u6D4F\\u89C8\\u5668\\u4E0A\\u8FD0\\u884C\\uFF0C\\u5F88\\u591A\\u5730\\u65B9\\u548C VSCode \\u7684\\u5B9E\\u73B0\\u5E76\\u4E0D\\u76F8\\u540C\\uFF0C\\u4E0D\\u8FC7\\u7F16\\u8F91\\u5668\\u672C\\u8EAB\\u7684\\u4F53\\u9A8C\\u5927\\u90E8\\u5206\\u662F\\u4E92\\u901A\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u96C6\\u6210\"), mdx(\"p\", null, \"WorkPad \\u9879\\u76EE\\u4E2D\\u7F16\\u8F91\\u5668\\u7684\\u96C6\\u6210\\u4E0D\\u53EF\\u80FD\\u7B80\\u5355\\u4E00\\u7BC7\\u6587\\u7AE0\\u8BF4\\u5F97\\u6E05\\u695A\\uFF0C\\u8FD9\\u91CC\\u53EA\\u662F\\u6700\\u57FA\\u7840\\u503C\\u5F97\\u8BF4\\u7684\\u65B9\\u9762\"), mdx(\"h3\", null, \"0. \\u5F15\\u5165\"), mdx(\"p\", null, \"\\u4F7F\\u7528 rquire \\u7684\\u65B9\\u5F0F\\u52A0\\u8F7D AMD \\u6807\\u51C6\\u6A21\\u5757\\u7684\\u5E93\\uFF0C\\u800C\\u4E0D\\u662F\\b\\u7528 ESM \\u6A21\\u5757\\u6807\\u51C6\\u4EA4\\u7ED9 webpack \\u6253\\u5305\\uFF0C\\u6BD5\\u7ADF\\u8FD9\\u4E2A\\u5185\\u6838\\u86EE\\u5927\\u7684\\uFF0C\\u8FD9\\u6837\\u505A\\u6BD4\\u8F83\\u7075\\u6D3B\\uFF0C\\u591A\\u8BED\\u8A00\\u3001worker \\u4E4B\\u7C7B\\u7684\\u4E0D\\u9700\\u8981\\u8D39\\u795E\\u914D\\u7F6E\\uFF0C\\u540E\\u7EED\\u7684\\u5185\\u90E8\\u6A21\\u5757\\u5F15\\u7528\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"require\"), \" \\u6765\\u83B7\\u53D6\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n\")), mdx(\"h3\", null, \"1. \\u4E8B\\u5148\\u914D\\u7F6E\"), mdx(\"p\", null, \"\\u914D\\u7F6E monaco \\u9ED8\\u8BA4\\u914D\\u7F6E\\uFF0C\\u76D1\\u542C editor \\u521B\\u5EFA\\u540E\\u914D\\u7F6E\\u7B49\\u64CD\\u4F5C:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"function bindTextmate() {\\n // ......\\n monaco.editor.setTheme(currentEditorTheme);\\n \\n for (const { id } of monaco.languages.getLanguages()) {\\n monaco.languages.onLanguage(id, () => activateLanguage(id));\\n }\\n}\\nconst dirtyManager = new DirtyDiffManager()\\n\\nfunction configureMonaco() {\\n bindTextmate(); // \\u914D\\u7F6E\\u8BED\\u6CD5\\u9AD8\\u4EAE\\u7B49\\n // ... bind other things\\n}\\nfunction configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {\\n dirtyManager.start(editor) // \\u914D\\u7F6E git diff \\u903B\\u8F91\\n}\\n\\nconfigureMonaco();\\nmonaco.editor.onDidCreateEditor(configureEditor);\\n\")), mdx(\"h3\", null, \"2. \\u521D\\u59CB\\u5316\\u4E00\\u4E2A\\u7F16\\u8F91\\u5668\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u672C\\u6765\\u662F\\nlet editorOverrides = {\\n editorService: {\\n // openEditor: function () {\\n // alert(`open editor called!` + JSON.stringify(arguments));\\n // },\\n // resolveEditor: function () {\\n // alert(`resolve editor called!` + JSON.stringify(arguments));\\n // }\\n }\\n}\\n\\nlet options: monaco.editor.IEditorOptions = {\\n minimap: {\\n enabled: true,\\n showSlider: 'always',\\n renderCharacters: false\\n },\\n glyphMargin: true,\\n lightbulb: {\\n enabled: true\\n },\\n extraEditorClassName: '__ubug_monaco',\\n};\\n\\nconst defaultModel = monaco.editor.createModel('', 'plaintext');\\nconst editor = monaco.editor.create(this.el, { ...options, model: defaultModel }, editorOverrides);\\n\")), mdx(\"p\", null, \"\\u5176\\u4E2D \\u7B2C\\u4E09\\u4E2A\\u53C2\\u6570 OverrideServices \\u76EE\\u7684\\u662F\\u8986\\u76D6\\u5185\\u7F6E\\u7684\\u4E00\\u4E9B\\u670D\\u52A1\\uFF0C\\u6BD4\\u5982\\u8DF3\\u8F6C\\u5230\\u6216\\u8005\\u5F15\\u7528\\u7B49\\u529F\\u80FD\\uFF0C\\u5728\\u67D0\\u4E9B\\u7248\\u672C\\u4E2D\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/microsoft/monaco-editor/issues/291#issuecomment-450709332\"\n }, \"\\u53EF\\u80FD\\u4F1A\\u88AB\\u8986\\u76D6\\u5BFC\\u81F4\\u5931\\u6548\"), \"\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u76F8\\u5BF9 hack \\u7684\\u65B9\\u5F0F\\u6DFB\\u52A0\\u529F\\u80FD\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"\\nfunction hackOverides(editor: monaco.editor.IStandaloneCodeEditor) {\\n // @ts-ignore\\n const services = [...editor._instantiationService._parent._services._entries.values()];\\n const textModelService = services.find((service) => {\\n const props = Object.getPrototypeOf(service)\\n return props && 'createModelReference' in props\\n });\\n\\n // @ts-ignore\\n const codeEditorService = editor._codeEditorService;\\n codeEditorService.openCodeEditor = (input: { resource: monaco.Uri, options: any }) => {\\n const { resource, options } = input\\n const file = resource.path;\\n const range = options.selection;\\n // Add code here to open the code editor.\\n\\n const states = window._novus.models.workspace.state\\n let path = file.replace(states.config.path, '')\\n\\n commandsPool.writer.openFile.trigger(path, () => {\\n window._novus.models.writer.state.currentEditor.setSelection(range);\\n window._novus.models.writer.state.currentEditor.revealLineInCenter(range.startLineNumber);\\n });\\n }\\n\\n\\n textModelService.createModelReference = async (uri: monaco.Uri) => {\\n\\n const fileManagerModel = window._novus.models[\\\"fileManager\\\"]\\n\\n const states = window._novus.models.workspace.state\\n let fileId = uri.path.replace(states.config.path, '')\\n let model = modelsHolder.models[fileId];\\n\\n if (!model) {\\n let file = await fileManagerModel.actions.queryFile(fileId);\\n const contentsMap = fileManagerModel.state.contentsMap\\n const content = contentsMap[fileId];\\n const language = getLang(`.${fileId.split('.').pop()}`)\\n\\n if (file) {\\n await fileManagerModel.actions.fetchFileContent(fileId);\\n modelsHolder.addModel(file.relative, file.path, content, language);\\n model = modelsHolder.models[fileId];\\n }\\n }\\n\\n const reference = {\\n load() {\\n return Promise.resolve(model.model)\\n },\\n // in my case, I have nothing to dispose as I just re-use existing resources\\n dispose() { },\\n textEditorModel: model.model\\n }\\n return {\\n object: reference,\\n dispose() { },\\n };\\n };\\n}\\n\\nhackOverides(editor);\\n\")), mdx(\"p\", null, \"\\u5728\\u6DFB\\u52A0 LSP \\u529F\\u80FD\\u6216\\u8005\\u672C\\u5730 model \\u8DEF\\u5F84\\u5B8C\\u6574\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u652F\\u6301\\u8DF3\\u8F6C\\u548C\\u5F15\\u7528\\u67E5\\u770B\\u3002\"), mdx(\"h3\", null, \"3. \\u5206\\u522B\\u50A8\\u5B58 model \\u548C state \\u6765\\u5B9E\\u73B0\\u591A\\u6587\\u4EF6\\u7F16\\u8F91\"), mdx(\"p\", null, \"\\u5728 IDE \\u6982\\u5FF5\\u4E2D\\u4E0D\\u53EF\\u80FD\\u6BCF\\u6B21\\u7F16\\u8F91\\u6587\\u4EF6\\u90FD\\u521B\\u5EFA\\u4E00\\u4E2A editor\\uFF0C\\u6240\\u4EE5\\u63D0\\u4F9B\\u4E86 model \\u548C state \\u7684\\u529F\\u80FD\\u6765\\u50A8\\u5B58\\u6587\\u4EF6\\u7684\\u6A21\\u578B\\u548C\\u72B6\\u6001\\u3002\"), mdx(\"p\", null, \"model \\u8868\\u793A\\u4E00\\u4E2A\\u7F16\\u8F91\\u6587\\u4EF6\\u7684\\u5FEB\\u7167\\uFF0C\\u5305\\u542B\\u6587\\u4EF6\\u4FE1\\u606F\\u3001\\u8BED\\u8A00\\u6807\\u8BB0\\u3001\\u914D\\u7F6E\\u3001\\u88C5\\u9970\\u4FE1\\u606F\\u7B49\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 getModel \\u548C setModel \\u5207\\u6362\\u4E0D\\u540C\\u7684\\u6587\\u4EF6\\u3002state \\u8868\\u793A\\u89C6\\u56FE\\u4E0A\\u7684\\u72B6\\u6001\\uFF0C\\u6BD4\\u5982\\u5149\\u6807\\u72B6\\u6001\\u3001\\u6EDA\\u52A8\\u4F4D\\u7F6E\\u7B49\\u4FE1\\u606F\\u3002\"), mdx(\"p\", null, \"\\u6839\\u636E\\u8FD9\\u4E24\\u4E2A\\u4FE1\\u606F\\u6765\\u652F\\u6301\\u591A\\u6587\\u4EF6\\u7684\\u7F16\\u8F91\\u548C\\u5207\\u6362\\u529F\\u80FD\\uFF0C\\u6211\\u5728\\u9879\\u76EE\\u4E2D\\u4F7F\\u7528\\u4E86\\u4E00\\u4E2A modelManager \\u6765\\u5355\\u72EC\\u5904\\u7406\\u6587\\u4EF6\\u5185\\u5BB9\\u3001\\u6587\\u4EF6\\u72B6\\u6001\\u3001\\u7F16\\u8F91\\u72B6\\u6001\\u4E4B\\u7C7B\\u7684\\uFF0C\\u53EF\\u4EE5\\u6839\\u636E\\u903B\\u8F91\\u7075\\u6D3B\\u7684\\u591A\\u6587\\u4EF6\\u5207\\u6362\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u83B7\\u53D6\\u5E76\\u5B58\\u50A8\\nlet model = this.editor.getModel();\\nlet state = this.editor.saveViewState();\\nmodelsManager.updateModeler({ id: currentTabId, model, state})\\n\\n// \\u6062\\u590D\\nlet targetModel = modelsManager.models[tabId];\\nthis.editor.setModel(targetModel.model);\\nthis.editor.restoreViewState(targetModel.state);\\n\")), mdx(\"h3\", null, \"4. \\u5468\\u8FB9\\u914D\\u7F6E\"), mdx(\"p\", null, \"\\u5E38\\u89C1\\u7684\\u4E00\\u4E9B\\u914D\\u7F6E\\u6BD4\\u5982 \\u7F29\\u8FDB\\u3001\\u7A7A\\u683C\\u3001\\u884C\\u5217\\u9009\\u62E9\\u3001\\u8BED\\u8A00\\u3001\\u6362\\u884C\\u6A21\\u5F0F\\u3001\\u6587\\u4EF6\\u5927\\u5C0F\\u7B49\\u4FE1\\u606F\\uFF0C\\u6BD4\\u5982\\u7F29\\u8FDB\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"283px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/90393f6ae3fe4c91ff41fcb311fc7970/13f95/indent-show.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"9.266409266409267%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkUlEQVQI12NwK17637FgMRhbZi34rxo9HUxrxM38r588Byxulb3gv17SbDA/pHb1f7vcRf91Emf/1wVikBxI3KlgyX/L7IX/GSLadv4Patr2P6x1x3+/+q3/NVKW/ncq2/BfK3Xpf7O81f9dKjYC8Yb/xjkr/5vnr/6fMekAWJ1h1gqwGEjONHfVf1+gmAVQHgDSKFz5bcQTawAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"配置展示\",\n \"title\": \"配置展示\",\n \"src\": \"/static/90393f6ae3fe4c91ff41fcb311fc7970/13f95/indent-show.png\",\n \"srcSet\": [\"/static/90393f6ae3fe4c91ff41fcb311fc7970/2c191/indent-show.png 259w\", \"/static/90393f6ae3fe4c91ff41fcb311fc7970/13f95/indent-show.png 283w\"],\n \"sizes\": \"(max-width: 283px) 100vw, 283px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u914D\\u7F6E\\u5C55\\u793A\"), \"\\n \")), mdx(\"p\", null, \"\\u5728\\u72B6\\u6001\\u680F\\u5C55\\u793A\\u90E8\\u5206\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"const IndentWidget = () => {\\n let state = useNovus((models) => {\\n const activeId = models.layout.state.layout.dealer.activeId;\\n return {\\n activeId: activeId,\\n activeTab: models.writer.state.tabs[activeId],\\n };\\n }, ['workspace', 'writer'])\\n\\n const model = modelsHolder.models[state.activeId];\\n if (!model || !state.activeTab || state.activeTab.type !== 'text') return null;\\n const options = model.model.getOptions();\\n const space = options.insertSpaces;\\n const tabSize = options.tabSize;\\n\\n return \\n \\n {`${space ? '\\u7A7A\\u683C' : 'Tab'}: ${space ? tabSize : null}`}\\n \\n \\n}\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"640px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/e4a91575e872b9464a4cca9d21b1eb64/d98de/indent-change.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"45.173745173745175%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABD0lEQVQoz52QTU+EMBRFWU105cIYILQdPoxGWgYzQDUBWoYxUdnorHTH//8V19aOmZUJujjp4r2e3Pu8m7sN7muNsuoMPSqp/0VZKdwal8flDpvnGdU0Y/s6I3o4IJTvCJu3RQQG8nhA+TIjyAp4JK8Qjx+43ls+cVlPOBdPWOUjVnx0728c52d8j4vthKs0hxfHMbpeoVcaWg8QokCSJKCMgbG1gS2CEGogTtg0NaSUKIQwQ4q1WaCUgi3E7kZRdBL2SkGZhG3bgnNxTLaAtWsQm0b2nxU7Yd9/03UdhmGHLMtcwgVV7Z51cM6d0N5LmYRWprVLmabpYuHphsRV/ulusQPf9xEEAcIw/DPW9QW1WAbRTUyemgAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"状态栏点击修改\",\n \"title\": \"状态栏点击修改\",\n \"src\": \"/static/e4a91575e872b9464a4cca9d21b1eb64/d98de/indent-change.png\",\n \"srcSet\": [\"/static/e4a91575e872b9464a4cca9d21b1eb64/2c191/indent-change.png 259w\", \"/static/e4a91575e872b9464a4cca9d21b1eb64/86b01/indent-change.png 518w\", \"/static/e4a91575e872b9464a4cca9d21b1eb64/d98de/indent-change.png 640w\"],\n \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u72B6\\u6001\\u680F\\u70B9\\u51FB\\u4FEE\\u6539\"), \"\\n \")), mdx(\"p\", null, \"\\u70B9\\u51FB\\u7684\\u547D\\u4EE4\\uFF0C\\u652F\\u6301\\u4F7F\\u7528 monaco-editor \\u81EA\\u5E26\\u7684 quickOpen \\u529F\\u80FD\\u5C55\\u793A\\u914D\\u7F6E\\u9009\\u9879\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import { getModel } from '.';\\n\\nconst { QuickOpenModel, QuickOpenEntryGroup } = window.require('vs/base/parts/quickopen/browser/quickOpenModel');\\nconst { BaseEditorQuickOpenAction } = window.require('vs/editor/standalone/browser/quickOpen/editorQuickOpen');\\nconst { matchesFuzzy } = window.require('vs/base/common/filters');\\nconst { Range } = window.require('vs/editor/common/core/range');\\n\\ntype TActionOption = {\\n withBorder?: boolean\\n group?: string\\n}\\n\\nfunction getIndentationEditOperations(model: monaco.editor.ITextModel, tabSize: number, tabsToSpaces: boolean) {\\n if (model.getLineCount() === 1 && model.getLineMaxColumn(1) === 1) { return; }\\n let spaces = ' '.repeat(tabSize);\\n let spacesRegExp = new RegExp(spaces, 'gi');\\n let operations = [];\\n\\n for (let lineNumber = 1, lineCount = model.getLineCount(); lineNumber <= lineCount; lineNumber++) {\\n let lastIndentationColumn = model.getLineFirstNonWhitespaceColumn(lineNumber) || model.getLineMaxColumn(lineNumber);\\n if (lastIndentationColumn === 1) continue;\\n\\n const originalIndentationRange = new Range(lineNumber, 1, lineNumber, lastIndentationColumn);\\n const originalIndentation = model.getValueInRange(originalIndentationRange);\\n const newIndentation = (tabsToSpaces ? originalIndentation.replace(/\\\\t/ig, spaces) : originalIndentation.replace(spacesRegExp, '\\\\t'));\\n operations.push({\\n range: originalIndentationRange,\\n text: newIndentation\\n });\\n }\\n model.applyEdits(operations);\\n}\\n\\nclass DemoActionCommandEntry extends QuickOpenEntryGroup {\\n constructor(highlights: any, editor: monaco.editor.IStandaloneCodeEditor, option: TActionOption) {\\n super();\\n this.editor = editor;\\n this.option = option;\\n this.withBorder = option.withBorder;\\n return this;\\n }\\n getLabel = () => this.option.label;\\n getAriaLabel = () => this.option.label;\\n getDetail = () => this.option.desc;\\n getGroupLabel = () => this.option.group || '';\\n\\n run = (mode: number) => {\\n if (mode === 1 /* OPEN */) {\\n var model = getModel(this.editor);\\n\\n if (this.option.operate[0] === 0) {\\n if (this.option.operate[1] === 0) {\\n model.updateOptions({\\n tabSize: this.option.operate[2],\\n insertSpaces: true\\n });\\n } else {\\n model.updateOptions({\\n insertSpaces: false\\n });\\n }\\n } else {\\n let modelOpts = model.getOptions();\\n // \\u8F6C\\u6362 model, builder, tabSize, tabsToSpaces\\n getIndentationEditOperations(model, modelOpts.tabSize, this.option.operate[1] === 0)\\n }\\n\\n return true;\\n }\\n return false;\\n };\\n}\\n\\nexport class IndentCommandAction extends BaseEditorQuickOpenAction {\\n constructor() {\\n super(\\\"ubug: \\u4FEE\\u6539\\u7F29\\u8FDB\\\", {\\n id: 'editor.ubug.changeIndent',\\n label: \\\"ubug: \\u4FEE\\u6539\\u7F29\\u8FDB\\\",\\n alias: 'ubug: \\u4FEE\\u6539\\u7F29\\u8FDB',\\n // menuOpts: {}\\n menuOpts: null\\n })\\n return this;\\n }\\n run = function (accessor: any, editor: monaco.editor.IStandaloneCodeEditor) {\\n this._show(this.getController(editor), {\\n getModel: function (value: string) {\\n var entries = [\\n {\\n label: '\\u4F7F\\u7528 2 \\u7A7A\\u683C\\u7F29\\u8FDB',\\n group: '\\u89C6\\u56FE',\\n desc: 'Indent Using 2 Spaces',\\n operate: [0, 0, 2] // insertSpaces, space nums\\n },\\n {\\n label: '\\u4F7F\\u7528 4 \\u7A7A\\u683C\\u7F29\\u8FDB',\\n desc: 'Indent Using 4 Spaces',\\n operate: [0, 0, 4]\\n },\\n {\\n label: '\\u4F7F\\u7528 Tab \\u7F29\\u8FDB',\\n desc: 'Indent Using Tab',\\n operate: [0, 1, 2]\\n },\\n {\\n label: '\\u4F7F\\u7528\\u7A7A\\u683C\\u8F6C\\u6362\\u5DF2\\u6709\\u5185\\u5BB9',\\n group: '\\u8F6C\\u6362',\\n desc: 'Indent Using 2 Spaces',\\n operate: [1, 0], // insertSpaces, space nums\\n withBorder: true\\n },\\n {\\n label: '\\u4F7F\\u7528 Tab \\u8F6C\\u6362\\u5DF2\\u6709\\u5185\\u5BB9',\\n desc: 'Indent Using Tab',\\n operate: [1, 1]\\n },\\n ];\\n var models = entries.filter(e => (matchesFuzzy(value, e.label) || matchesFuzzy(value, e.desc))).map((e) => {\\n return new DemoActionCommandEntry(value, editor, e);\\n })\\n return new QuickOpenModel(models);\\n },\\n getAutoFocus: function (searchValue: string) {\\n return {\\n autoFocusFirstEntry: searchValue.length > 0,\\n autoFocusIndex: getModel(editor).getOptions().defaultEOL - 1\\n };\\n }\\n });\\n };\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u76F8\\u5F53\\u4E8E\\u662F\\u5C06\\u600E\\u4E48\\u5728 monaco-editor \\u7684\\u83DC\\u5355\\u4E2D\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u7684\\u9009\\u9879\\u5217\\u8868\\uFF0C\\u4E0D\\u9700\\u8981\\u81EA\\u5DF1\\u5199\\u5177\\u4F53\\u7684\\u903B\\u8F91\\uFF0C\\u529F\\u80FD\\u7684\\u63D0\\u4F9B\\u662F monaco-editor \\u81EA\\u5E26\\u7684\\uFF0C\\u975E\\u5E38\\u6709\\u8DA3\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4ED6\\u7684\\u6BD4\\u5982 \\u8BED\\u8A00\\u9009\\u53D6\\u3001\\u7F16\\u7801\\u6A21\\u5F0F\\u90FD\\u53EF\\u4EE5\\u7528\\u8FD9\\u79CD\\u65B9\\u5F0F\\u6269\\u5C55\\u3002\"), mdx(\"h3\", null, \"5. \\u5176\\u4ED6\\u5468\\u8FB9\"), mdx(\"p\", null, \"LSP \\u96C6\\u6210\\u3001DirtyDiff \\u96C6\\u6210\\u3001TextMate \\u9AD8\\u4EAE\\u96C6\\u6210\\u5728\\u540E\\u9762\\u90FD\\u4F1A\\u6DF1\\u5165\\u8BF4\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u6269\\u5C55\\u96C6\\u6210\"), mdx(\"p\", null, \"\\u96C6\\u6210\\u9700\\u8981\\u6D89\\u53CA\\u7684\\u4E1C\\u897F\\u5305\\u62EC\\u6CE8\\u518C\\u6269\\u5C55\\u3001\\u6CE8\\u518C\\u6570\\u636E\\u6A21\\u578B\\u3001\\u6CE8\\u518C command \\u52A8\\u4F5C\\u5E93\\u3001\\u6CE8\\u518C\\u72B6\\u6001\\u680F\\u3002\"), mdx(\"p\", null, \"monaco-editor \\u989D\\u5916\\u9700\\u8981\\u505A\\u7684\\u6709\\u7F16\\u8F91\\u5668\\u914D\\u7F6E\\u3001model \\u914D\\u7F6E\\u3001model \\u548C state \\u72B6\\u6001\\u62C6\\u5206\\u3001DirtyDiff \\u548C Peek \\u65B9\\u6848\\u3001\\u5F15\\u7528\\u548C\\u8DF3\\u8F6C\\u65B9\\u6848\\u3001\\u591A\\u8BED\\u8A00\\u5207\\u6362\\u4EE5\\u53CA\\u7F29\\u8FDB\\u7B49\\u9009\\u9879\\u3001textmate \\u9AD8\\u4EAE\\u65B9\\u6848\\u3001LSP \\u65B9\\u6848\\u7B49\"), mdx(\"h3\", null, \"1. \\u6269\\u5C55\\u6CE8\\u518C\"), mdx(\"p\", null, \"\\u5728\\u5185\\u6838\\u642D\\u5EFA\\u8D77\\u6765\\u4E4B\\u540E\\uFF0C\\u80FD\\u591F\\u901A\\u8FC7\\u62D3\\u5C55\\u7684\\u5F62\\u5F0F\\u5728\\u89C6\\u56FE\\u4E0A\\u7684\\u67D0\\u4E2A\\u533A\\u57DF\\u6CE8\\u518C\\u5185\\u5BB9\\uFF0C\\u6240\\u4EE5\\u6211\\u4EEC\\u53EA\\u9700\\u8981\\u5199\\u4E00\\u4E2A\\u62D3\\u5C55\\uFF0C\\u7136\\u540E\\u6309\\u7167\\u914D\\u7F6E\\u7EA6\\u5B9A\\u5199\\u4E0A\\u903B\\u8F91\\u5C31\\u80FD\\u5C06\\u7F16\\u8F91\\u5668\\u96C6\\u6210\\u8FDB\\u53BB\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import React from 'react';\\n\\nimport model from \\\"./model\\\";\\nimport { Extension } from '..';\\nimport Novus from '../../models';\\n\\nimport Writer from \\\"./Component\\\";\\nimport WriterTab from \\\"./Component/tab\\\";\\n\\nimport { registerStatusBar } from \\\"@utils/statusBar\\\";\\n\\nimport LineWidget from \\\"./statusBar/LineWidget\\\";\\nimport IndentWidget from \\\"./statusBar/IndentWidget\\\";\\nimport EncodeWidget from \\\"./statusBar/EncodeWidget\\\";\\nimport EOLWidget from \\\"./statusBar/EOLWidget\\\";\\nimport LanguageWidget from \\\"./statusBar/LanguageWidget\\\";\\n\\n// monaco editor addons\\nimport initEditorPlugins from './monacoPlugins/index';\\nimport configureMonaco from './afterMonaco/index';\\nimport configureEditor from './afterEditor/index';\\n\\ninitEditorPlugins();\\n\\nimport { commands } from \\\"./commands\\\";\\n\\nexport default (novus: Novus): Extension => {\\n novus.bindModel(model);\\n\\n commandsCenter.registerCommands(\\\"writer\\\", commands);\\n\\n registerStatusBar({\\n lineWidget: { com: LineWidget },\\n indentWidget: { com: IndentWidget },\\n encodeWidget: { com: EncodeWidget },\\n EOLWidget: { com: EOLWidget },\\n LanguageWidget: { com: LanguageWidget },\\n });\\n\\n return {\\n id: 'writer',\\n useSticky: 'writer-dealer',\\n panel: Writer,\\n tab: WriterTab,\\n init: () => {\\n // config Monaco and every editor\\n configureMonaco();\\n monaco.editor.onDidCreateEditor(configureEditor);\\n },\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u4EE3\\u7801\\u8868\\u793A\\u6CE8\\u518C\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"writer\"), \" \\u7684\\u6269\\u5C55\\uFF0Ccommands \\u91CC\\u9762\\u63D0\\u4F9B\\u6253\\u5F00 tab \\u7684\\u65B9\\u6CD5\\uFF0C\\u7136\\u540E\\u5185\\u6838\\u6846\\u67B6\\u6E32\\u67D3\\u7684\\u65F6\\u5019\\uFF0C\\u4F1A\\u6839\\u636E tab \\u7684\\u7C7B\\u578B\\u8C03\\u7528\\u8FD9\\u4E2A writer \\u6765\\u6E32\\u67D3\\u754C\\u9762\\u3002\\u540C\\u65F6\\u8FD8\\u6CE8\\u518C\\u4E86\\u5E95\\u90E8\\u7684\\u72B6\\u6001\\u680F\\uFF0C\\u80FD\\u591F\\u6839\\u636E\\u5F53\\u524D\\u6253\\u5F00\\u7684\\u6587\\u4EF6\\u663E\\u793A\\u8F85\\u52A9\\u6570\\u636E\\u3002\"), mdx(\"h3\", null, \"2. \\u6570\\u636E\\u6A21\\u578B\"), mdx(\"p\", null, \"\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u5DF2\\u7ECF\\u8BF4\\u660E\\u4E86\\u6570\\u636E\\u6A21\\u578B\\u5728\\u8FD9\\u4E2A\\u9879\\u76EE\\u4E2D\\u7684\\u7528\\u6CD5\\uFF0C\\u8FD9\\u4E2A\\u6570\\u636E\\u6A21\\u578B\\u4FDD\\u5B58\\u5F53\\u524D\\u7684\\u5168\\u90E8\\u6253\\u5F00\\u6587\\u4EF6\\u4EE5\\u53CA\\u76F8\\u5173\\u64CD\\u4F5C\\u65B9\\u6CD5\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"type TabConfig = {\\n id: string; // id \\u552F\\u4E00\\u6807\\u8BC6\\n preview: boolean; // \\u662F\\u5426\\u662F\\u9884\\u89C8\\u72B6\\u6001\\n name: string; // \\u6587\\u4EF6\\u540D\\n type: string; // \\u6587\\u4EF6\\u7C7B\\u578B\\uFF08\\u53EF\\u4EE5\\u662F\\u6587\\u672C\\u6587\\u4EF6\\u3001\\u56FE\\u7247\\u3001HTML \\u9884\\u89C8\\uFF09\\n file: TFile; // \\u6587\\u4EF6\\u7684\\u7C7B\\u578B\\uFF08\\u8FD9\\u4E2A\\u5728\\u6587\\u4EF6\\u7BA1\\u7406\\u5668\\u4E2D\\u5B9A\\u4E49\\uFF0C\\u9644\\u5E26\\u6587\\u4EF6\\u7684\\u5730\\u5740\\u3001\\u76F8\\u5BF9\\u5730\\u5740\\u3001\\u5927\\u5C0F\\u3001\\u4FEE\\u6539\\u4E8B\\u4EF6\\u3001\\u7B80\\u5355 git \\u4FE1\\u606F\\u7B49\\uFF09\\n language: string; // \\u6587\\u672C\\u6587\\u4EF6\\u7684\\u8BDD\\uFF0C\\u4EE3\\u7801\\u8BED\\u8A00\\n changed: boolean; // \\u6807\\u8BC6\\u5F53\\u524D\\u7F16\\u8F91\\u5668\\u7684\\u5185\\u5BB9\\u662F\\u5426\\u6709\\u6539\\u52A8\\n content: string; // \\u6682\\u5B58\\u5F53\\u524D tab \\u7684\\u6587\\u4EF6\\u5185\\u5BB9\\n status: number; // \\u6587\\u4EF6\\u72B6\\u6001\\n modelReady: boolean; // \\u662F\\u5426\\u5DF2\\u7ECF\\u6CE8\\u518C\\u4E86 editor \\u7684 model\\n specialType?: string; // \\u662F\\u5426\\u662F\\u7279\\u6B8A\\u7C7B\\u578B\\uFF0C\\u9700\\u8981\\u7279\\u6B8A\\u6E32\\u67D3\\n}\\n\\ntype Tabs = {\\n [index: string]: TTab;\\n}\\n\\nexport type TTabs = ImmutableObjectMixin & Tabs;\\nexport type TTab = ImmutableObjectMixin & TabConfig;\\n\\nexport interface IWriterState {\\n tabs: TTabs,\\n currentEditor: monaco.editor.IStandaloneCodeEditor,\\n}\\n\\nclass WriterModel extends NovusBaseModel {\\n namespace = 'writer'\\n constructor(){\\n super()\\n this.state = {\\n tabs: Immutable({}), // \\u4F7F\\u7528\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7C7B\\u578B\\uFF0C\\u4F7F\\u5F97\\u6DF1\\u5C42\\u5BF9\\u8C61\\u6539\\u53D8\\u4E5F\\u80FD\\u89E6\\u53D1\\u66F4\\u65B0\\u72B6\\u6001\\n currentEditor: null,\\n }\\n }\\n\\n actions = {\\n // ---------- tabs\\n notifyTabClose: (tabId: string) => {\\n // ...\\n },\\n editorChange: (editor: monaco.editor.IStandaloneCodeEditor) => {\\n this.setState({ currentEditor: editor })\\n },\\n updateTab: (tabId: string, data: Pick) => {\\n // ...\\n },\\n previewConfirm: (tabId: string) => {\\n // ...\\n },\\n openTab: async (file: TFile, skipPreview: boolean = false) => {\\n // ...\\n let tab = generateTab(file, skipPreview);\\n if (tab) {\\n // ...\\n await this.getModel('layout').actions.modifyPanels({\\n adds: [\\n {\\n component: 'writer',\\n id: fileId,\\n data: { tabId: fileId },\\n stackPosition: 'dealer'\\n }\\n ],\\n removes\\n });\\n }\\n },\\n }\\n};\\nexport default new WriterModel();\\n\")), mdx(\"h3\", null, \"3. command \\u6253\\u5F00\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import { getSpecialType } from \\\"./specialEditors\\\";\\nimport Immutable from \\\"seamless-immutable\\\";\\n\\nimport { TFile, TFileRaw } from \\\"../FileManager/model\\\";\\n\\nexport const commands = {\\n gotoLine: {\\n trigger: () => {\\n // ...\\n }\\n },\\n changeIndent: {\\n trigger: () => {\\n // ...\\n }\\n },\\n chooseLanguage: {\\n trigger: () => {\\n // ...\\n }\\n },\\n showSourceCode: {\\n label: \\\"\\u67E5\\u770B\\u6E90\\u4EE3\\u7801\\\",\\n trigger: () => {\\n // ...\\n }\\n },\\n openFile: {\\n trigger: async (\\n fileRelative: string,\\n cb?: Function,\\n skipPreview?: boolean\\n ) => {\\n window._novus.models[\\\"writer\\\"].actions.previewConfirm(fileId);\\n // or ...\\n await window._novus.models.layout.actions.activePanel(fileId);\\n // or ...\\n window._novus.models[\\\"writer\\\"].actions.openTab(file, skipPreview);\\n }\\n }\\n },\\n createUntitledFile: {\\n key: [\\\"ctrl+n\\\"],\\n label: \\\"\\u65B0\\u5EFA\\u6587\\u4EF6\\\",\\n trigger: () => {\\n // ...\\n }\\n }\\n};\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/workpad/workpad-part-1.md","id":"362ef756-e712-5e50-b663-d88e9c40a8c8","parent":{"name":"workpad-part-1","sourceInstanceName":"blog"},"excerpt":"先看效果演示： 一、为什么要做 在我刚开始入门的时候，当时用 CodeMirror 做了一个前端 Demo 系统，类似 JSFiddle 可以用原生的 html 、 css 、 js 保存展示代码，然后在博客内引入代码和效果，这是代码编辑器的最初版本。后来看到 vscode 的火热，突发奇想想搬到浏览器端，实现真正的云端开发环境。 当时做这个的想法比较初始，还没有现在很多云服务商或者大公司内部提供的在线开发平台，毕竟当时浏览器下虽然有 Eclipse Che ， Cloud…","fields":{"title":"🌋 WebIDE 的开发记录其一（前言和概览）","slug":"/blog/workpad-part-1","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第一篇文章，谈谈想法、技术栈、基础核心等。","date":"2019-12-24","redirects":null,"datetime":"2019-12-24 10:58:09","categories":["webide"],"series":"WebIDE 的开发记录","tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"status":"online"},"frontmatter":{"published":null,"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"theme":null,"slug":"workpad-part-1","date":"2019-12-24 10:58:09"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"workpad-part-1\",\n \"title\": \"🌋 WebIDE 的开发记录其一（前言和概览）\",\n \"date\": \"2019-12-24 10:58:09\",\n \"author\": \"Ubug\",\n \"description\": \"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第一篇文章，谈谈想法、技术栈、基础核心等。\",\n \"series\": \"WebIDE 的开发记录\",\n \"categories\": [\"webide\"],\n \"tags\": [\"思考\", \"整理\", \"WorkPad\", \"WebIDE\", \"云开发\", \"在线编辑器\"],\n \"banner\": \"./WorkPad-demo.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"\\u5148\\u770B\\u6548\\u679C\\u6F14\\u793A\\uFF1A\"), mdx(\"div\", {\n style: {\n display: 'flex',\n justifyContent: 'center'\n }\n }, mdx(WithFigcaption, {\n title: \"\\u8FD0\\u884C\\u6548\\u679C\",\n mdxType: \"WithFigcaption\"\n }, mdx(\"video\", {\n autoPlay: true,\n loop: true,\n controls: true,\n style: {\n width: '100%'\n }\n }, mdx(\"source\", {\n src: \"https://fdb.ubug.io/storybook-videos/workpad-video.mp4\",\n type: \"video/mp4\"\n })))), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4E3A\\u4EC0\\u4E48\\u8981\\u505A\"), mdx(\"p\", null, \"\\u5728\\u6211\\u521A\\u5F00\\u59CB\\u5165\\u95E8\\u7684\\u65F6\\u5019\\uFF0C\\u5F53\\u65F6\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"CodeMirror\"), \" \\u505A\\u4E86\\u4E00\\u4E2A\\u524D\\u7AEF \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Demo\"), \" \\u7CFB\\u7EDF\\uFF0C\\u7C7B\\u4F3C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"JSFiddle\"), \" \\u53EF\\u4EE5\\u7528\\u539F\\u751F\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"html\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"css\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"js\"), \" \\u4FDD\\u5B58\\u5C55\\u793A\\u4EE3\\u7801\\uFF0C\\u7136\\u540E\\u5728\\u535A\\u5BA2\\u5185\\u5F15\\u5165\\u4EE3\\u7801\\u548C\\u6548\\u679C\\uFF0C\\u8FD9\\u662F\\u4EE3\\u7801\\u7F16\\u8F91\\u5668\\u7684\\u6700\\u521D\\u7248\\u672C\\u3002\\u540E\\u6765\\u770B\\u5230 vscode \\u7684\\u706B\\u70ED\\uFF0C\\u7A81\\u53D1\\u5947\\u60F3\\u60F3\\u642C\\u5230\\u6D4F\\u89C8\\u5668\\u7AEF\\uFF0C\\u5B9E\\u73B0\\u771F\\u6B63\\u7684\\u4E91\\u7AEF\\u5F00\\u53D1\\u73AF\\u5883\\u3002\"), mdx(\"p\", null, \"\\u5F53\\u65F6\\u505A\\u8FD9\\u4E2A\\u7684\\u60F3\\u6CD5\\u6BD4\\u8F83\\u521D\\u59CB\\uFF0C\\u8FD8\\u6CA1\\u6709\\u73B0\\u5728\\u5F88\\u591A\\u4E91\\u670D\\u52A1\\u5546\\u6216\\u8005\\u5927\\u516C\\u53F8\\u5185\\u90E8\\u63D0\\u4F9B\\u7684\\u5728\\u7EBF\\u5F00\\u53D1\\u5E73\\u53F0\\uFF0C\\u6BD5\\u7ADF\\u5F53\\u65F6\\u6D4F\\u89C8\\u5668\\u4E0B\\u867D\\u7136\\u6709 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Eclipse Che\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Cloud9\"), \" \\u7B49\\u65B9\\u6848\\uFF0C\\u4F46\\u662F\\u5F00\\u53D1\\u4F53\\u9A8C\\u786E\\u5B9E\\u5F88\\u5DEE\\u3002\\u800C\\u73B0\\u5728\\u51FA\\u73B0 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theia\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"code-server\"), \" \\u975E\\u5E38\\u4F18\\u79C0\\u800C\\u4E14\\u5F00\\u6E90\\u7684\\u9879\\u76EE\\uFF0C\\u7528\\u6237\\u4F53\\u9A8C\\u548C\\u672C\\u5730\\u5F00\\u53D1\\u51E0\\u4E4E\\u6CA1\\u5DEE\\uFF0C\\u518D\\u52A0\\u4E0A\\u5BB9\\u5668\\u5316\\u6280\\u672F\\u975E\\u5E38\\u6210\\u719F\\u7684\\u73B0\\u5728\\uFF0C\\u6D4F\\u89C8\\u5668\\u4E2D\\u968F\\u65F6\\u5C55\\u5F00\\u5F00\\u53D1\\u73AF\\u5883\\u7684\\u8F7B\\u91CF\\u7EA7 IDE \\u5DF2\\u7ECF\\u6210\\u4E3A\\u73B0\\u5B9E\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u53EF\\u60DC\\u5F53\\u65F6\\u6211\\u51C6\\u5907\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u662F 18 \\u5E74\\u4E0B\\u534A\\u5E74\\uFF0C\\u8FD9\\u4E9B\\u4E1C\\u897F\\u90FD\\u6CA1\\u6709\\u90A3\\u4E48\\u6210\\u719F\\u6216\\u8005\\u53D1\\u5E03\\uFF0C\\u6574\\u4E2A\\u9879\\u76EE\\u505A\\u4E0B\\u6765\\uFF0C\\u8E29\\u4E86\\u5F88\\u591A\\u5751\\uFF0C\\u4E0D\\u8FC7\\u786E\\u5B9E\\u6536\\u83B7\\u662F\\u5DE8\\u5927\\u7684\\u3002\"), mdx(\"p\", null, \"\\u800C\\u4E14\\u5176\\u4E2D\\u5F88\\u591A\\u7528\\u5230\\u7684\\u6280\\u672F\\uFF0C\\u6B63\\u597D\\u5F53\\u65F6\\u53C2\\u52A0\\u4E86\\u817E\\u8BAF\\u65D7\\u4E0B \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Coding\"), \" \\u4E3B\\u529E\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"CloudIDE\"), \" \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://studio.qcloud.coding.net/campaign/favorite-plugins/detail\"\n }, \"\\u63D2\\u4EF6\\u6BD4\\u8D5B\"), \"\\uFF0C\\u5F00\\u53D1\\u4E86 9 \\u4E2A\\u63D2\\u4EF6\\uFF0C\\u5728140+\\u4E2A\\u63D2\\u4EF6\\u4E2D\\u62FF\\u5230\\u4E86 3 \\u4E2A\\u4F18\\u80DC\\u4E00\\u7B49\\u5956\\u548C 5 \\u4E2A\\u524D\\u4E94\\u4F18\\u79C0\\u5956\\uFF0C\\u4F18\\u80DC\\u63D2\\u4EF6\\u751A\\u81F3\\u88AB\\u5B98\\u65B9\\u5185\\u7F6E\\uFF0C\\u771F\\u662F\\u610F\\u5916\\u60CA\\u559C\\uFF0C\\u8FD8\\u56E0\\u6B64\\u63D0\\u4F9B\\u4E86\\u597D\\u51E0\\u6B21\\u5DE5\\u4F5C\\u673A\\u4F1A\\uFF0C\\u867D\\u7136\\u6CA1\\u53BB\\u5F88\\u9057\\u61BE\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"762px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/d4634d854e6eb9eda534113992f6bb22/faaa2/reward.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"68.33976833976834%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAADXElEQVQ4yz2RW1NbVRiG92+wN7YQIOSwd87ZJDsnIMEUaUbBItPOcFEVeyPW1pnKjVcde+MvcZzxJ+idM53RqaJlwEISQnMkgXDKAXIqPK5sKBfPrLXXfr9vvev9pNJ2h3LpgFQqx85OkdZpl7Nmh9NGW9C53jdqXQ5KQluusr1doHZ8Kv5dai/Xrq6T2s0epeK+TiZTEBSplA/ZqxzpHFRPqO6fUK+d0ay1KZWqZLO7pNI5crmyrunr9/eOOTpsiIatHvV6l0a9Q7Pe0gvfuWuKtVlvc96DXueC9lmPk6OGcNu61vTP3tFrXyD1OrC5+juFTErcuEc+X9FvPT5qcnLcpHZyKlzW9CZnzTY//fwLr9ZTbCWzIqISu8Lx7pXrYmGv7/CccmaN/Js0axsZXv69zqu1LTY3d3gtSKfzJFNZvaglXBxWDqkmMzQO63Tb57qzTuvttUupf9gRLtsHNZr5Ei0Rckdc0n/mefeSi7fo32enoqHIM72RIi0cZrIVkXmJLTHQZCovci0g9TNJioDTG0n+efGSUr6sD6hYqAhX/WGJGK7Crx/VON4/YF1o/3jxJ6u//cq/f63yev0/itkchTdZpPj0hywlbvNpfAp/MMzExCSTfSajxGIxfX//3n2++voRXy5/x4OnP/Lt9894+miFpYcrLC4/48Hj53z+5DlfPPkB6dbAAAGjgaBiZXBoCMPgIMMjIxjE/v2bN7lx4z3sgRjehWXk+CLTC5+x9Pgb4pPTOCOzWIJzWAIfY4t8gje2gGS2WPC7XUIwQSAQwOf3o7kc2GUrNrMJs2EA+0QCdXEF3/xDErNzTH10l/DtO0SCfqIRjbCmEo9FuDubQPKMaaihcbRIFJfqR3Z5ccgKssWKbFVQbTa8fg0tFCE4+QGxO3NEZ2YJTc0gKzZsDjd2hwuH043PpyFZZDN2l4ziNGO1j+qYFCMmeQSjQLaZUN1OXC4nqtdDKBggLAhoPqyyCdluRdXGUP1uAkEVyW41o3mcBFVR4LDiEiK3YtbxCpThQdHMTVQMaDwcZmY8TDgyTigUwumW8YzJjIVVfEGHaGoXGRqFq1ETFqMJo2FIMHy1DjEqGL41gKIoeDweMfEJ7s3Pk0gkiEajmPsZW2XxZAc2RcbldPA/0+7wFcsU8LYAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"比赛优胜\",\n \"title\": \"比赛优胜\",\n \"src\": \"/static/d4634d854e6eb9eda534113992f6bb22/faaa2/reward.png\",\n \"srcSet\": [\"/static/d4634d854e6eb9eda534113992f6bb22/2c191/reward.png 259w\", \"/static/d4634d854e6eb9eda534113992f6bb22/86b01/reward.png 518w\", \"/static/d4634d854e6eb9eda534113992f6bb22/faaa2/reward.png 762w\"],\n \"sizes\": \"(max-width: 762px) 100vw, 762px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u6BD4\\u8D5B\\u4F18\\u80DC\"), \"\\n \")), mdx(\"p\", null, \"\\u65F6\\u95F4\\u4E45\\u8FDC\\uFF0C\\u5F53\\u65F6\\u7684\\u8BBE\\u8BA1\\u548C\\u60F3\\u6CD5\\u6CA1\\u6709\\u96C6\\u4E2D\\u6574\\u7406\\uFF0C\\u4F46\\u662F\\u5F88\\u503C\\u5F97\\u8BB0\\u5F55\\uFF0C\\u6682\\u65F6\\u60F3\\u5230\\u7684\\u5728\\u6B64\\u8BB0\\u5F55\\u4E0B\\uFF01\"), mdx(\"div\", {\n \"style\": {},\n \"'flex',\": \"\",\n \"justifycontent:\": \"\",\n \"'center',\": \"\",\n \"textalign:\": \"\",\n \"'center'}}\": \"\"\n }, \"\\n \", mdx(\"figure\", {\n parentName: \"div\",\n \"className\": \"gatsby-resp-image-figure\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"figure\",\n \"src\": \"/workpad-f7b6355c096f677b088d2189a95b6a29.svg\",\n \"width\": 100\n }), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u715E\\u6709\\u5176\\u4E8B\\u7684 P \\u4E86\\u4E2A logo\"), \"\\n \")), mdx(\"p\", null, \"\\u8FD8\\u662F\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u7684\\u529F\\u80FD\\u7684\\uFF0C\\u7F16\\u8F91\\u5668\\u3001\\u6587\\u4EF6\\u7BA1\\u7406\\u5668\\u3001\\u641C\\u7D22\\u3001GIT\\u3001\\u8FD0\\u884C\\u73AF\\u5883\\u3001\\u7EC8\\u7AEF\\u7B49\\uFF0C\\u7B97\\u662F\\u6BD4\\u8F83\\u5B8C\\u6574\\u7684\\u5F00\\u53D1\\u73AF\\u5883\\u4E86\\uFF0C\\u80FD\\u505A\\u4E00\\u70B9\\u7B80\\u5355\\u8F7B\\u91CF\\u7684\\u5F00\\u53D1\\u5DE5\\u4F5C\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u622A\\u6B62\\u76EE\\u524D\\u7684\\u6574\\u4F53\\u67B6\\u6784\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/f40c40289c831a613822af07a8011413/d9d45/WorkPad.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"71.81467181467181%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAAC+ElEQVQ4y3WTu28cVRTGTf6GKBKbgoqOhgohGkpo6OhAFICQKCgiIQFFGkRBQYAqZZAiHhKSZVBkgom9sUUSLzveeO04O2vvzsY7j527O7PznjuPe+fjjL28THKlT2fOOff+9M3MuUusu75Ur+df/2QJMM4BeIIikkVKSRkpIYlFj51756MvTzhLRRI8VUdw53zC87tuyDskxXJjxXQihXmJYs8TZR5lih9nCgu4MqO+F3FlHvI27e1GCV9DHpw/AZZpdApEcNGNC8w4sK1FeOXzO7j0jYLV1hGWf+9DGTiYeAXusQI7LMfQCjD2SjDaz3zuk/PGAhj+BWzMwizR3Qy/dm3xzPsr4o0r62J5QxHXb7bFRkcTmuWJH9qGWDtg4lB3xZAl5cjJCJia9AmePuuw4YQZN8nFb3t29ewHP+Otr5pY3tjB9ZsKbt8f4dgO8NOujaY6gzYJQEA5npc10CaHZ4FhYxpwPnZzArLquUs38OaVdVy70cLVlRaa3TGOdBfX2hOsqS7UYweqGcqRWwM5AeMzwNRp8Fxw5ifQLKfqHFrY06boGx5UAjlhDi8pSOXf0U9LybwYpj0jIP4L9Kd6g4pc5gJxGFU8CZGlMUSZU1niCeukIaWw6V+cfWU0eGjzP/aWoY+2q8ToY/5oH7HRQ6T3kFh9cFKdJ+ZpXk4HspoNUATT/zusgbrZ4e99/xJ+3Py0So86MB5sYT5UwNRtOL07sA5ID+9h1m/h+H4T470t6fVuI5tqjweak13+4cprWG1/XWGiojA6iLu/gKtNVJN9OAebCChPH95CPNiG3t2SsdaG9C07/wcY/svhTvL2ty/gu/XLAo8UWRl35YPLL8vDq+/Kku3LyeoXcv/jF6X62auy6K1KsJ0yHzRRzEbW4xxeTKMpBuYmXOeApqCeBAtC30Vl9+gq0+zOR4A7pKjRlBkkqvljcI95taHTu7xwGLvGBSrSSdApDKuF6meRxcPcn5wIi9qiN0h4Nk7TtAXBL9ScPwEpkF3PFLzh5gAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"WorkPad 架构\",\n \"title\": \"WorkPad 架构\",\n \"src\": \"/static/f40c40289c831a613822af07a8011413/0dc48/WorkPad.png\",\n \"srcSet\": [\"/static/f40c40289c831a613822af07a8011413/2c191/WorkPad.png 259w\", \"/static/f40c40289c831a613822af07a8011413/86b01/WorkPad.png 518w\", \"/static/f40c40289c831a613822af07a8011413/0dc48/WorkPad.png 1035w\", \"/static/f40c40289c831a613822af07a8011413/d9d45/WorkPad.png 1136w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"WorkPad \\u67B6\\u6784\"), \"\\n \")), mdx(\"p\", null, \"\\u540E\\u53F0\\u4E00\\u4E2A server \\u8D1F\\u8D23\\u627F\\u8F7D\\u63A5\\u53E3\\uFF0C\\u7136\\u540E\\u6587\\u4EF6\\u67E5\\u770B\\u548C\\u64CD\\u4F5C\\u3001git\\u7684\\u67E5\\u770B\\u548C\\u64CD\\u4F5C\\u548C\\u8BED\\u8A00\\u670D\\u52A1\\u5668\\u90FD\\u662F\\u7EDF\\u4E00\\u7684 server \\u8D1F\\u8D23\\uFF0Cdocker \\u4E2D\\u7684\\u73AF\\u5883\\u8D1F\\u8D23\\u63D0\\u4F9B\\u8FD0\\u884C\\u73AF\\u5883\\u548C\\u547D\\u4EE4\\u884C\\u3002\"), mdx(\"p\", null, \"\\u521A\\u5F00\\u59CB\\u7684\\u60F3\\u6CD5\\u5176\\u5B9E\\u66F4\\u60F3\\u5C06\\u6587\\u4EF6\\u3001git\\u3001\\u8BED\\u8A00\\u670D\\u52A1\\u90FD\\u653E\\u5230 docker \\u4E2D\\uFF0C\\u4F46\\u662F\\u5982\\u679C\\u8FD9\\u6837\\u6BCF\\u4E2A\\u5BB9\\u5668\\u5185\\u90FD\\u8981\\u5305\\u542B\\u4E00\\u5957\\u670D\\u52A1\\uFF0C\\u8FD9\\u4E5F\\u5C31\\u8FDD\\u80CC\\u4E86\\u8F7B\\u91CF\\u5E72\\u51C0\\u7684\\u521D\\u8877\\uFF0C\\u6240\\u4EE5\\u670D\\u52A1\\u5668\\u5C06\\u8FD9\\u4E9B\\u5265\\u79BB\\uFF0C\\u5BB9\\u5668\\u770B\\u8D77\\u6765\\u5C31\\u662F\\u4E00\\u4E2A\\u5E72\\u51C0\\u7684\\u5BB9\\u5668\\u73AF\\u5883\\u6302\\u8F7D\\u6587\\u4EF6\\u800C\\u5DF2\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u5FC3\\u5F97\"), mdx(\"p\", null, \"\\u8F83\\u5927\\u578B\\u7684\\u9879\\u76EE\\u7684\\u7CFB\\u7EDF\\u548C\\u529F\\u80FD\\u96C6\\u6210\\u771F\\u7684\\u6CA1\\u6709\\u90A3\\u4E48\\u7B80\\u5355\\uFF0C\\u6574\\u4E2A\\u9879\\u76EE\\u5F02\\u5E38\\u590D\\u6742\\uFF0C\\u6BCF\\u4E2A\\u529F\\u80FD\\u3001\\u673A\\u5236\\u548C\\u754C\\u9762\\u90FD\\u82B1\\u4E86\\u975E\\u5E38\\u591A\\u7684\\u7CBE\\u529B\\u6253\\u78E8\\uFF0C\\u5BF9\\u4E8E\\u8FD9\\u7C7B\\u8F83\\u5927\\u9879\\u76EE\\u6709\\u5F88\\u591A\\u7684\\u6536\\u83B7\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"Typescript\")), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u590D\\u6742\\u5927\\u578B\\u9879\\u76EE\\u5FC5\\u987B\\u8981\\u7528 Typescript \\u4E0D\\u7136\\u4F1A\\u6B7B\\u4EBA\\u7684\\u3002\\u5176\\u4E2D\\u5F88\\u591A\\u5730\\u65B9\\u53CD\\u590D\\u5C1D\\u8BD5\\u5B9E\\u73B0\\uFF0C\\u4F1A\\u6D89\\u53CA\\u5230\\u5F88\\u591A\\u6B21\\u91CD\\u6784\\uFF0C\\u6BD4\\u5982\\u4E00\\u4E2A\\u6570\\u636E\\u6A21\\u578B\\u7684\\u7ED3\\u6784\\u53D8\\u5316\\u8FD9\\u6837\\u4E00\\u4E2A\\u5E38\\u89C1\\u9700\\u6C42\\uFF0C\\u5982\\u679C\\u6CA1\\u6709\\u7C7B\\u578B\\u63D0\\u793A\\uFF0C\\u6839\\u672C\\u6CA1\\u529E\\u6CD5\\u8FFD\\u8E2A\\u6240\\u6709\\u7684 references \\u7684\\uFF0C\\u5C24\\u5176\\u662F\\u591A\\u4EBA\\u534F\\u4F5C\\u66F4\\u662F\\u707E\\u96BE\\u3002\\u800C\\u4F7F\\u7528 TypeScript \\u540E\\uFF0C\\u4EE3\\u7801\\u63D0\\u793A\\u3001\\u7C7B\\u578B\\u9650\\u5236\\u7B49\\u5BF9\\u6548\\u7387\\u7684\\u63D0\\u5347\\u975E\\u5E38\\u660E\\u663E\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u597D\\u7684\\u5730\\u65B9\\u662F\\u65E7\\u9879\\u76EE\\u7684\\u5347\\u7EA7\\uFF0C\\u5982\\u679C\\u521A\\u5F00\\u59CB\\u7684\\u65F6\\u5019\\u6CA1\\u6709\\u7528\\uFF0C\\u540E\\u7EED\\u7684\\u6539\\u9020\\u8FD8\\u662F\\u5F88\\u82B1\\u7CBE\\u529B\\u7684\\uFF0C\\u6240\\u4EE5\\u65E0\\u8BBA\\u5927\\u5C0F\\u9879\\u76EE\\uFF0C\\u5F3A\\u70C8\\u63A8\\u8350 TS\\uFF0C\\u5E76\\u4E14\\u6253\\u5F00 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"no-any\"), \" \\u89C4\\u5219\\uFF0C\\u7ECF\\u5386\\u8FC7\\u521A\\u5F00\\u59CB\\u4E0D\\u505C\\u7684\\u5B9A\\u4E49\\u7C7B\\u578B\\u7684\\u9635\\u75DB\\u540E\\uFF0C\\u4F1A\\u975E\\u5E38\\u723D\\uFF0C\\u4EE3\\u7801\\u8D28\\u91CF\\u4E5F\\u4F1A\\u5F88\\u81EA\\u7136\\u7684\\u66F4\\u9AD8\\u3002\"), mdx(\"ol\", {\n \"start\": 2\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u53EF\\u63A8\\u65AD\\u7F16\\u7A0B\")), mdx(\"p\", null, \"\\u4E0D\\u77E5\\u9053\\u600E\\u4E48\\u63CF\\u8FF0\\u8FD9\\u79CD\\u6A21\\u5F0F\\uFF0C\\u4F8B\\u5982 this \\u5728\\u524D\\u7AEF\\u7684\\u5386\\u53F2\\u4E0A\\u662F\\u4E00\\u4E2A\\u5F88\\u91CD\\u8981\\u7684\\u6982\\u5FF5\\uFF0C\\u56E0\\u4E3A\\u8868\\u610F\\u4E0D\\u660E\\uFF0C\\u4E0D\\u540C\\u7684\\u73AF\\u5883\\u4E0B\\u8981\\u4ED4\\u7EC6\\u5206\\u6790\\u53EF\\u80FD\\u624D\\u4E0D\\u4F1A\\u5F04\\u9519\\uFF0C\\u6240\\u4EE5\\u6211\\u73B0\\u5728\\u5C3D\\u91CF\\u53EA\\u5728 class \\u91CC\\u9762\\u4F7F\\u7528\\uFF1Bredux \\u6982\\u5FF5\\u7684 action type \\u5B57\\u7B26\\u4E32\\u7C7B\\u578B\\uFF0C\\u867D\\u7136\\u53EF\\u4EE5\\u7528\\u5E38\\u91CF\\u6765\\u907F\\u514D\\u62FC\\u5199\\u9519\\u8BEF\\uFF0C\\u4F46\\u662F\\u7528\\u8D77\\u6765\\u80C6\\u6218\\u5FC3\\u60CA\\u7684\\uFF1Begg.js \\u4E2D\\u81EA\\u52A8\\u5E2E\\u4F60\\u6302\\u8F7D\\u7684\\u8DEF\\u7531\\u4E4B\\u7C7B\\u7684\\uFF0C\\u6211\\u628A\\u8FD9\\u53EB\\u505A\\u4E0D\\u53EF\\u63A8\\u65AD\\u7F16\\u7A0B\\u3002\\u7279\\u70B9\\u662F\\u7F16\\u7A0B\\u5DE5\\u5177\\u5F88\\u96BE\\u9759\\u6001\\u7684\\u7ED9\\u4F60\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u6CA1\\u529E\\u6CD5 goto definition\\uFF0C\\u4F60\\u9700\\u8981\\u8BB0\\u5FC6\\u6216\\u8005\\u67E5\\u8BE2\\u624D\\u77E5\\u9053\\u81EA\\u5DF1\\u5199\\u7684\\u5BF9\\u4E0D\\u5BF9\\uFF0C\\u8FD9\\u5F88\\u5BB9\\u6613\\u9020\\u6210\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\\uFF0C\\u5C24\\u5176\\u662F\\u91CD\\u5EA6\\u4F9D\\u8D56 typescript \\u7684\\u72B6\\u6001\\u4E0B\\uFF0C\\u8FD9\\u7B80\\u76F4\\u50CF\\u662F\\u978B\\u5B50\\u91CC\\u7684\\u77F3\\u5B50\\u90A3\\u6837\\u784C\\u811A\\u3002\"), mdx(\"p\", null, \"\\u7EA6\\u5B9A\\u5927\\u4E8E\\u914D\\u7F6E\\u662F\\u4E0D\\u9519\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u4F46\\u662F\\u5927\\u578B\\u9879\\u76EE\\u548C\\u591A\\u4EBA\\u534F\\u4F5C\\u7684\\u65F6\\u5019\\uFF0C\\u7EA6\\u5B9A\\u8FD8\\u662F\\u4E0D\\u8981\\u592A\\u591A\\u3002\\u4E0D\\u53EF\\u63A8\\u65AD\\u7684\\u90E8\\u5206\\u9700\\u8981\\u505A\\u7684\\u6539\\u52A8\\u5C31\\u662F\\u5C06\\u786E\\u5B9A\\u7684\\u5B57\\u7B26\\u4E32\\u53C2\\u6570\\uFF0C\\u53D8\\u6210\\u663E\\u5F0F\\u7684\\u65B9\\u6CD5\\u8C03\\u7528\\uFF0C\\u867D\\u7136\\u7075\\u6D3B\\u6027\\u964D\\u4F4E\\uFF0C\\u4F46\\u662F\\u4E0D\\u4F1A\\u51FA\\u73B0\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\\u6216\\u8005\\u53C2\\u6570\\u95EE\\u9898\\u4E86\"), mdx(\"ol\", {\n \"start\": 2\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6570\\u636E\\u5C42\")), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u5355\\u72EC\\u7684\\u6570\\u636E\\u5C42\\u662F\\u975E\\u5E38\\u91CD\\u8981\\u7684\\uFF0C\\u73B0\\u4EE3\\u524D\\u7AEF\\u6280\\u672F\\u5DF2\\u7ECF\\u53EF\\u4EE5\\u5206\\u4E3A\\u6570\\u636E\\u548C\\u6E32\\u67D3\\u4E24\\u90E8\\u5206\\u4E86\\uFF0C\\u4E00\\u4E2A\\u6570\\u636E\\u5C42\\u51B3\\u5B9A\\u4E86\\u4E00\\u4E2A\\u9875\\u9762\\u662F\\u4EC0\\u4E48\\u6837\\u5B50\\u3002\\u5982\\u679C\\u6570\\u636E\\u5206\\u6563\\u3001\\u4E0E\\u754C\\u9762\\u7CC5\\u6742\\u5728\\u4E00\\u8D77\\uFF0C\\u9879\\u76EE\\u590D\\u6742\\u71B5\\u5C31\\u4F1A\\u8D8A\\u6765\\u8D8A\\u5927\\u5230\\u65E0\\u6CD5\\u7EF4\\u62A4\\u3002\\u800C\\u5206\\u79BB\\u7684\\u9879\\u76EE\\u53EA\\u9700\\u8981\\u7EF4\\u62A4\\u72B6\\u6001\\u5373\\u53EF\\uFF0CUI \\u90FD\\u751A\\u81F3\\u662F\\u53EF\\u4EE5\\u91CD\\u542F\\u7684\\u3002\"), mdx(\"ol\", {\n \"start\": 3\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u53EF\\u6269\\u5C55\\u67B6\\u6784\")), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u9879\\u76EE\\u53EF\\u4EE5\\u9884\\u89C1\\u7684\\u590D\\u6742\\uFF0C\\u90A3\\u4E48\\u4ECE\\u6700\\u57FA\\u7840\\u7684\\u5EFA\\u8BBE\\u5F00\\u59CB\\u5C31\\u8981\\u8003\\u8651\\u67B6\\u6784\\u4E86\\uFF0C\\u5730\\u57FA\\u6253\\u7684\\u597D\\uFF0C\\u76D6\\u623F\\u6CA1\\u70E6\\u607C\\u3002\\u5C31\\u8FD9\\u4E2A\\u9879\\u76EE\\u7684\\u57FA\\u7840\\u90E8\\u5206\\u521A\\u5F00\\u59CB\\u5C31\\u4FEE\\u6539\\u4E86\\u4E09\\u56DB\\u4E2A\\u7248\\u672C\\uFF0C\\u4ECE\\u80FD\\u7528\\u5230\\u53EF\\u4EE5\\u968F\\u610F\\u6DFB\\u52A0\\u6269\\u5C55\\u6269\\u5C55\\u529F\\u80FD\\uFF0C\\u4ECE\\u5199\\u6B7B\\u7CC5\\u6742\\u5230\\u53EF\\u4EE5\\u63D0\\u4F9B\\u6807\\u51C6\\u683C\\u5F0F\\u6570\\u636E\\u548C\\u7EDF\\u4E00\\u7684\\u6269\\u5C55\\u52A0\\u8F7D\\u8C03\\u7528\\u673A\\u5236\\uFF0C\\u5F00\\u53D1\\u96BE\\u5EA6\\u4ECE\\u5782\\u76F4\\u6DF1\\u5165\\u5230\\u6C34\\u5E73\\u6269\\u5C55\\uFF0C\\u96BE\\u5EA6\\u964D\\u4F4E\\u3002\"), mdx(\"p\", null, \"\\u4E8B\\u5148\\u9884\\u89C1\\u9879\\u76EE\\u7684\\u9700\\u6C42\\u76EE\\u6807\\u3001\\u529F\\u80FD\\u9700\\u6C42\\uFF0C\\u7136\\u540E\\u4E8B\\u5148\\u8FDB\\u884C\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u662F\\u4E00\\u4E2A\\u6210\\u719F\\u7801\\u519C\\u7684\\u6807\\u5FD7\\uFF0C\\u80FD\\u8BA9\\u4F60\\u4ECE\\u7E41\\u6742\\u7684\\u8E29\\u5751\\u4E4B\\u65C5\\u4E2D\\u627E\\u5230\\u80FD\\u591F\\u7F15\\u6E05\\u601D\\u8DEF\\u7684\\u70B9\\u7EBF\\u3002\"), mdx(\"ol\", {\n \"start\": 4\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6210\\u719F\\u7684\\u8F6E\\u5B50\")), mdx(\"p\", null, \"\\u8BBE\\u60F3\\u7684\\u65F6\\u5019\\u4F4E\\u4F30\\u4E86\\u6574\\u4E2A\\u9879\\u76EE\\u590D\\u6742\\u5EA6\\uFF0C\\u6240\\u4EE5\\u5F88\\u591A\\u5730\\u65B9\\u60F3\\u81EA\\u5DF1\\u5B9E\\u73B0\\uFF0C\\u4F46\\u662F\\u5176\\u5B9E\\u6709\\u5F88\\u591A\\u5751\\uFF0C\\u5982\\u679C\\u591A\\u82B1\\u70B9\\u65F6\\u95F4\\u68B3\\u7406\\u8C03\\u7814\\u5C31\\u4F1A\\u53D1\\u73B0\\u5176\\u5B9E\\u4E1A\\u5185\\u5F88\\u591A\\u4EBA\\u8D9F\\u8FC7\\u8FD9\\u6761\\u8DEF\\uFF0C\\u82B1\\u70B9\\u65F6\\u95F4\\u7814\\u7A76\\u900F\\u5F7B\\u6BD4\\u786C\\u5543\\u5F97\\u6536\\u76CA\\u8FD8\\u662F\\u5927\\u4E9B\\u7684\\u3002\\u4E0D\\u8FC7\\u53E6\\u4E00\\u65B9\\u9762\\u62FF\\u6765\\u5C31\\u7528\\u53EF\\u80FD\\u4F1A\\u51FA\\u73B0\\u5F88\\u4E0D\\u4F18\\u96C5\\u7684\\u5B9E\\u73B0\\uFF0C\\u8FD8\\u662F\\u8981\\u8003\\u8651\\u5230\\u5B9E\\u9645\\uFF0C\\u6309\\u9700\\u5F15\\u5165\\u6216\\u8005\\u6309\\u9700\\u53D8\\u66F4\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u6838\\u5FC3\\u6280\\u672F\\u6808\"), mdx(\"p\", null, \"\\u6709\\u4E86\\u60F3\\u6CD5\\uFF0C\\u7136\\u540E\\u7B80\\u5355\\u641C\\u7D22\\u4E4B\\u540E\\u601D\\u8DEF\\u5F00\\u9614\\u5F88\\u591A\\uFF0C\\u524D\\u7AEF\\u7684\\u6280\\u672F\\u6808\\u5B8C\\u5168\\u80FD\\u591F\\u5B9E\\u73B0\\u4E91\\u7AEF\\u4EE3\\u7801\\u7684\\u7F16\\u8F91\\u3002\\u5F53\\u65F6\\u975E\\u5E38\\u6D45\\u7684\\u770B\\u4E86 VSC \\u7684\\u4E00\\u4E9B\\u6E90\\u7801\\uFF0C\\u4F46\\u662F\\u4E3B\\u8981\\u60F3\\u770B\\u81EA\\u5DF1\\u80FD\\u5B9E\\u73B0\\u5230\\u4EC0\\u4E48\\u7A0B\\u5EA6\\uFF0C\\u6240\\u4EE5\\u5E76\\u6CA1\\u6709\\u6DF1\\u5165\\u8C03\\u7814 VSC \\u7684\\u67B6\\u6784\\u6216\\u8005\\u63D2\\u4EF6\\u7B49\\uFF0C\\u5F88\\u591A\\u4E1C\\u897F\\u53EF\\u80FD\\u8D70\\u4E86\\u4E00\\u4E9B\\u5F2F\\u8DEF\\u3002\"), mdx(\"h3\", null, \"4.1 \\u7B2C\\u4E00\\u7248\"), mdx(\"p\", null, \"\\u7B2C\\u4E00\\u7248\\u7684\\u60F3\\u6CD5\\u662F\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u5236\\u5B9A\\u4E00\\u4E2A\\u5DE5\\u4F5C\\u76EE\\u5F55\\uFF0C\\u83B7\\u53D6\\u6587\\u4EF6\\u5217\\u8868\\uFF0C\\u7528\\u7F16\\u8F91\\u5668\\u7F16\\u8F91\\u4FEE\\u6539\\u540E\\u518D\\u4FDD\\u5B58\\uFF0C\\u7136\\u540E\\u7EC8\\u7AEF\\u6765\\u5B9E\\u73B0\\u5176\\u4ED6\\u66F4\\u9AD8\\u7EA7\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"p\", null, \"\\u7528\\u5230\\u7684\\u6280\\u672F\\u6808\\u5F88\\u7B80\\u5355\\u4E3A\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://microsoft.github.io/monaco-editor/index.html\"\n }, \"monaco-editor\"), \" \\u4F5C\\u4E3A\\u7F16\\u8F91\\u5668\\uFF0C\\u652F\\u6301\\u591A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Model\"), \" \\u5207\\u6362\\uFF0C\\u4EE3\\u7801\\u9AD8\\u4EAE\\u548C\\u7B80\\u5355\\u7684\\u4EE3\\u7801\\u63D0\\u793A\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://xtermjs.org/\"\n }, \"Xterm.js\"), \" + \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/microsoft/node-pty\"\n }, \"node-pty\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"websocket\"), \" \\u4F5C\\u4E3A\\u524D\\u7AEF\\u7EC8\\u7AEF\\u7684\\u65B9\\u6848\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://eggjs.org/zh-cn/intro/\"\n }, \"Egg.js\"), \" \\u4F5C\\u4E3A\\u670D\\u52A1\\uFF0C\\u7B80\\u5355\\u6307\\u5B9A\\u6587\\u4EF6\\u5939\\uFF0C\\u63D0\\u4F9B\\u6587\\u4EF6\\u7684\\u589E\\u5220\\u6539\\u67E5 REST API\\uFF0C\\u5B9E\\u73B0\\u6811\\u5F62\\u8D44\\u6E90\\u7BA1\\u7406\\u5668\")), mdx(\"p\", null, \"\\u8FD9\\u4E00\\u5757\\u5B9E\\u73B0\\u8D77\\u6765\\u6BD4\\u8F83\\u7B80\\u5355\\uFF0C\\u5B9E\\u9645\\u65F6\\u95F4\\u82B1\\u8D39\\u66F4\\u591A\\u7684\\u662F\\u57FA\\u7840\\u67B6\\u6784\\u7684\\u5B9E\\u73B0\\uFF0C\\u6BD5\\u7ADF\\u540E\\u7EED\\u66F4\\u591A\\u7684\\u529F\\u80FD\\u642D\\u5EFA\\u90FD\\u662F\\u57FA\\u4E8E\\u6B64\\u3002\"), mdx(\"p\", null, \"\\u671F\\u95F4\\u5B9E\\u73B0\\u4E86\\u5F88\\u591A\\u6709\\u8DA3\\u7684\\u529F\\u80FD\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6838\\u5FC3\\u7684\\u9875\\u9762\\u5E03\\u5C40\\u548C\\u6570\\u636E\\u7ED3\\u6784\")), mdx(\"ol\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u91C7\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"dva\"), \" \\u7684\\u6570\\u636E\\u6A21\\u578B\\uFF0C\\u5C01\\u88C5\\u6570\\u636E\\u5C9B\\uFF0C\\u5206\\u6A21\\u5757\\u63D0\\u4F9B\\u6570\\u636E\\u72B6\\u6001\\uFF0C\\u805A\\u5408\\u6570\\u636E\\u7684\\u64CD\\u4F5C\\u4E3A\\u5355\\u5411\\u6570\\u636E\\u6D41\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u91C7\\u7528 core + extensions \\u6838\\u5FC3\\u529F\\u80FD\\u52A0\\u6269\\u5C55\\u529F\\u80FD\\u67B6\\u6784\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6838\\u5FC3\\u529F\\u80FD\\u4F7F\\u7528\\u6807\\u51C6\\u7684\\u6570\\u636E\\u7ED3\\u6784\\u6E32\\u67D3\\u51FA\\u5185\\u5BB9\\u9875\\u9762\\uFF0C\\u63D0\\u4F9B action \\u9A71\\u52A8\\u673A\\u5236\\u548C UI \\u63D2\\u69FD\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6BCF\\u4E2A extension \\u6302\\u8F7D\\u72EC\\u7ACB\\u7684\\u6570\\u636E\\u5C9B\\uFF0C\\u6CE8\\u518C\\u6570\\u636E\\u548C UI \\u7EC4\\u4EF6\\u7684\\u7EDF\\u4E00\\u673A\\u5236\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u7075\\u6D3B\\u7684\\u89C6\\u56FE\\u5C42\\u5E03\\u5C40\")), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u89C6\\u56FE\\u5C42\\u662F\\u63D0\\u4F9B\\u529F\\u80FD\\u7684\\u6838\\u5FC3\\uFF0C\\u521A\\u5F00\\u59CB\\u60F3\\u66F4\\u7075\\u6D3B\\u7684\\u81EA\\u7531\\u5212\\u5206\\u533A\\u57DF\\uFF0C\\u4F46\\u662F\\u5B9E\\u73B0\\u8D77\\u6765\\u6BD4\\u8F83\\u91CD\\u91CF\\uFF0C\\u800C\\u4E14\\u6CA1\\u6709\\u5FC5\\u8981\\uFF0C\\u82B1\\u4E86\\u5F88\\u591A\\u65F6\\u95F4\\u6700\\u540E\\u8FD8\\u662F\\u7167\\u7740 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"VSCode\"), \" \\u7684\\u6837\\u5B50\\u5B9E\\u73B0\\u4E86\\u4E00\\u4E2A\\u6838\\u5FC3\\u533A\\u57DF\\u52A0\\u4E09\\u8FB9\\u8F85\\u52A9\\u533A\\u57DF\\u7684\\u6837\\u5F0F\\uFF0C\\u5305\\u62EC layout -> stack -> tabs + panels \\u7684\\u5C42\\u7EA7\\u67B6\\u6784\\u3002\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"monaco-editor \\u7684\\u5355\\u5B9E\\u4F8B\\u591A model \\u5B9E\\u73B0\\uFF0C\")), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u8FD9\\u4E2A\\u672C\\u8EAB\\u5176\\u5B9E\\u5F88\\u7B80\\u5355\\uFF0Ceditor \\u5B9E\\u4F8B\\u672C\\u8EAB\\u63D0\\u4F9B model \\u548C state \\u7684\\u83B7\\u53D6\\u548C\\u8BBE\\u7F6E\\uFF0C\\u6BD4\\u8F83\\u590D\\u6742\\u7684\\u662F\\u4E00\\u4E2A editor \\u662F\\u4E00\\u4E2A\\u754C\\u9762\\u4E0E\\u63D0\\u4F9B\\u7684 layout/panels \\u673A\\u5236\\u4E0D\\u540C\\uFF0C\\u6700\\u540E\\u6DFB\\u52A0\\u4E86\\u4E00\\u4E2A\\u591A tab \\u516C\\u7528 panel \\u7684\\u7279\\u6B8A\\u673A\\u5236\\u89E3\\u51B3\\u4E86\\u3002\")))), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u8FD9\\u4E9B\\u5185\\u5BB9\\u4E2D\\u503C\\u5F97\\u804A\\u7684\\u90FD\\u4F1A\\u5728\\u540E\\u9762\\u8BE6\\u8BF4\")), mdx(\"h3\", null, \"4.2 \\u7B2C\\u4E8C\\u7248\"), mdx(\"p\", null, \"\\u5B9E\\u73B0\\u4E86\\u7B2C\\u4E00\\u7248\\u4E4B\\u540E\\u53D1\\u73B0\\u5F88\\u591A\\u95EE\\u9898\\uFF0C\\u6BD4\\u5982\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6CA1\\u529E\\u6CD5\\u591A\\u9879\\u76EE\\u5207\\u6362\\uFF0C\\u5DE5\\u4F5C\\u76EE\\u5F55\\u53EA\\u6709\\u4E00\\u4E2A\")), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u89E3\\u51B3\\u529E\\u6CD5\\u5C31\\u662F\\u4F7F\\u7528\\u591A\\u76EE\\u5F55\\u7684\\u540E\\u53F0\\u652F\\u6301\\uFF0C\\u524D\\u7AEF\\u52A0\\u53C2\\u6570\\uFF0C\\u540E\\u7AEF\\u5206\\u903B\\u8F91\\u5904\\u7406\\uFF0C\\u8FD9\\u4E2A\\u4E0D\\u662F\\u95EE\\u9898\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4FB5\\u5165\\u6027\\u5F88\\u5F3A\\uFF0C\\u4E00\\u6BB5\\u65F6\\u95F4\\u540E\\u670D\\u52A1\\u5668\\u5C31\\u5B89\\u88C5\\u4E86\\u5F88\\u591A\\u5F00\\u53D1\\u5DE5\\u5177\\u3001\\u670D\\u52A1\\u548C\\u4F9D\\u8D56\\uFF0C\\u4F5C\\u4E3A\\u670D\\u52A1\\u5668\\u4E0D\\u5E94\\u8BE5\\u6709\\u8FD9\\u4E9B\")), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u89E3\\u51B3\\u65B9\\u6848\\u53EA\\u6709\\u4E00\\u4E2A\\uFF0C\\u5C31\\u662F\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"docker\"), \" \\u5BB9\\u5668\\u6765\\u5C06\\u5DE5\\u4F5C\\u76EE\\u5F55\\u5305\\u542B\\u8FDB\\u6765\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u7136\\u540E\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"docker exec\"), \" \\u63A5\\u53E3\\u63A5\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"websocket\"), \" \\u8FDE\\u63A5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u8FD9\\u6837\\u5BB9\\u5668\\u80FD\\u63D0\\u4F9B\\u7EC8\\u7AEF\\uFF0C\\u800C\\u4E14\\u5B89\\u88C5\\u7684\\u670D\\u52A1\\u548C\\u4F9D\\u8D56\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5916\\u90E8\\u670D\\u52A1\\u5668\")))), mdx(\"p\", null, \"\\u6B64\\u65F6\\u6280\\u672F\\u6808\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5B9E\\u73B0\\u4E00\\u4E9B \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"docker\"), \" \\u5F00\\u53D1\\u955C\\u50CF\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"docker api\"), \" \\u7BA1\\u7406\\u8FD0\\u884C\\u73AF\\u5883\\uFF0C\\u8FD0\\u884C\\u7684\\u65F6\\u5019\\u6302\\u8F7D\\u9879\\u76EE\\u6587\\u4EF6\\u5939\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://microsoft.github.io/monaco-editor/index.html\"\n }, \"monaco-editor\"), \" \\u4F5C\\u4E3A\\u7F16\\u8F91\\u5668\\uFF0C\\u652F\\u6301\\u591A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Model\"), \" \\u5207\\u6362\\uFF0C\\u4EE3\\u7801\\u9AD8\\u4EAE\\u548C\\u7B80\\u5355\\u7684\\u4EE3\\u7801\\u63D0\\u793A\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://xtermjs.org/\"\n }, \"Xterm.js\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"websocket\"), \" + \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/apocas/dockerode\"\n }, \"dockerode\"), \".exec \\u4F5C\\u4E3A\\u7EC8\\u7AEF\\u7684\\u65B9\\u6848\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4F7F\\u7528 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/steveukx/git-js\"\n }, \"simple-git\"), \" \\u83B7\\u53D6/\\u64CD\\u4F5C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"git\"), \" \\u529F\\u80FD\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u65F6\\u5019 \\u6DFB\\u52A0\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"docker\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"git\"), \" \\u4E4B\\u540E\\u6709\\u4E86\\u66F4\\u591A\\u60F3\\u8C61\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"dirty-diff\"), \" \\u7F16\\u8F91\\u5668\\u5FC5\\u5907\\u7684\\u4E00\\u4E2A\\u529F\\u80FD\\uFF0C\\u82B1\\u4E86\\u5F88\\u591A\\u65F6\\u95F4\\u53C2\\u8003 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"vscode\"), \" \\u7684\\u5B9E\\u73B0\\uFF0C\\u5728 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"monaco-editor\"), \" \\u4E0A\\u6DFB\\u52A0\\u4E86\\u8FD9\\u4E2A\\u529F\\u80FD\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"docker\"), \" \\u7684\\u8FD0\\u884C\\u73AF\\u5883\\uFF0C\\u4F9D\\u9760\\u8FD9\\u4E2A\\u5E72\\u51C0\\u72EC\\u7ACB\\u529F\\u80FD\\uFF0C\\u80FD\\u591F\\u63D0\\u4F9B\\u5F88\\u591A\\u4E0D\\u540C\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"workpad-runner\"), \" \\u8FD0\\u884C\\u65F6\\u955C\\u50CF\\uFF0C\\u6BD4\\u5982\\u5185\\u7F6E\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"node\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"php\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Python\"), \" \\u7684\\u5FEB\\u901F\\u5F00\\u53D1\\u73AF\\u5883\\uFF0C\\u6BCF\\u6B21\\u542F\\u52A8\\u65B0\\u7684\\u5F00\\u53D1\\u9879\\u76EE\\u6307\\u5B9A\\u5177\\u4F53\\u7684\\u955C\\u50CF\\uFF0C\\u8FD9\\u6837\\u4E0D\\u540C\\u9879\\u76EE\\u53EF\\u4EE5\\u6709\\u56FA\\u5B9A\\u5E72\\u51C0\\u7684\\u5F00\\u53D1\\u73AF\\u5883\\u4E86\\u3002\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u81F3\\u6B64\\u8FD9\\u4E2A\\u7248\\u672C\\u6BD4\\u8F83\\u81EA\\u6D3D\\u4E86\\uFF0C\\u5404\\u4E2A\\u6A21\\u5757\\u6BD4\\u8F83\\u548C\\u8C10\\u591F\\u7528\\uFF0C\\u540E\\u53F0\\u5B9E\\u73B0\\u7684\\u67B6\\u6784\\u540E\\u7EED\\u6CA1\\u6709\\u8F83\\u5927\\u7684\\u6539\\u52A8\\u4E86\\u3002\")), mdx(\"p\", null, \"-> \\u5728 monaco-editor \\u96C6\\u6210 VSC \\u4E2D\\u7684 dirty-diff \\u529F\\u80FD\\u53EF\\u4EE5\\u67E5\\u770B\\uFF1A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-7\"\n }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E03\\uFF08DirtyDiff \\u652F\\u6301\\uFF09\")), mdx(\"h3\", null, \"4.3 \\u7B2C\\u4E09\\u7248\"), mdx(\"p\", null, \"\\u7B2C\\u4E8C\\u7248\\u7684\\u96C6\\u6210\\u82B1\\u4E86\\u70B9\\u65F6\\u95F4\\uFF0C\\u5B9E\\u73B0\\u4E4B\\u540E\\u529F\\u80FD\\u786E\\u5B9E\\u4E0D\\u9519\\uFF0C\\u73AF\\u5883\\u72EC\\u7ACB\\u3001\\u7BA1\\u7406\\u65B9\\u4FBF\\u3001\\u529F\\u80FD\\u8F83\\u5168\\uFF0C\\u4F46\\u662F\\u8FD8\\u6709\\u4E0D\\u5C3D\\u5982\\u610F\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9AD8\\u4EAE\\u7684\\u903B\\u8F91\\u548C\\u9884\\u60F3\\u4E0D\\u540C\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4EE3\\u7801\\u63D0\\u793A\\u53EA\\u6709\\u9ED8\\u8BA4\\u548C\\u5F53\\u524D\\u6587\\u4EF6\\u7684\\uFF0C\\u6574\\u9879\\u76EE\\u7684\\u4EE3\\u7801\\u63D0\\u793A\\u505A\\u4E0D\\u5230\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6CA1\\u6709\\u8C03\\u8BD5\\u529F\\u80FD\")), mdx(\"p\", null, \"\\u8FD9\\u4E00\\u5757\\u8FDB\\u884C\\u4E86\\u5F88\\u591A\\u5C1D\\u8BD5\\uFF0C\\u6D89\\u53CA\\u5230\\u7684\\u7B97\\u662F\\u6BD4\\u8F83\\u6DF1\\u5165\\uFF0C\\u82B1\\u7684\\u65F6\\u95F4\\u4E5F\\u5F88\\u957F\\uFF1A\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u8BED\\u6CD5\\u548C\\u9AD8\\u4EAE\\u90E8\\u5206\")), mdx(\"p\", null, \"\\u4E00\\u756A\\u641C\\u7D22\\u53D1\\u73B0 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco-editor\"), \" \\u7684\\u8BED\\u8A00\\u652F\\u6301\\u4F7F\\u7528\\u7684\\u662F\\u5185\\u7F6E\\u7684 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://microsoft.github.io/monaco-editor/monarch.html\"\n }, \"Monarch\"), \" \\u8FD9\\u4E2A\\u8BED\\u6CD5\\u9AD8\\u4EAE\\u652F\\u6301\\uFF0C\\u8BED\\u8A00\\u7684\\u652F\\u6301\\u4E5F\\u53EA\\u6709\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"worker\"), \" \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"js\"), \" \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ts\"), \" \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"html\"), \" \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"css\"), \" \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"json\"), \" \\u8FD9\\u4E9B\\u3002\\u4F46\\u662F\\u4E1A\\u5185\\u66F4\\u901A\\u7528\\u3001\\u751F\\u6001\\u66F4\\u4E30\\u5BCC\\u7684\\u662F \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://macromates.com/manual/en/language_grammars\"\n }, \"Textmate\"), \"\\uFF0C\\u5305\\u62EC \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"VSCode\"), \" \\u4E5F\\u662F\\u7528\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Textmate\"), \"\\u3002\\u4F46\\u662F\\u53EF\\u559C\\u7684\\u662F Textmate \\u8BED\\u6CD5\\u7684\\u89E3\\u6790\\u662F\\u7528\\u7684 C \\u8BED\\u8A00\\u652F\\u6301\\u7684\\uFF0C\\u5728 node \\u4E0A\\u5C1A\\u4E14\\u53EF\\u4EE5\\u8003\\u8651\\uFF0C\\u4F46\\u662F\\u6D4F\\u89C8\\u5668\\u7AEF\\u53EA\\u80FD\\u53E6\\u8F9F\\u8E4A\\u5F84\\u4E86\\u3002\"), mdx(\"p\", null, \"-> \\u8BE6\\u7EC6\\u53EF\\u4EE5\\u67E5\\u770B\\u540E\\u9762\\u6587\\u7AE0 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-5\"\n }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E94\\uFF08monaco-editor + textmate\\uFF09\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u9AD8\\u7EA7\\u4EE3\\u7801\\u63D0\\u793A\")), mdx(\"p\", null, \"\\u4E00\\u4E2A IDE \\u548C\\u7F16\\u8F91\\u5668\\u5F88\\u660E\\u663E\\u7684\\u4F7F\\u7528\\u533A\\u522B\\u5C31\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"go to definition\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"go to references\"), \"\\uFF0C\\u4E5F\\u5C31\\u662F\\u8DF3\\u8F6C\\u5B9A\\u4E49\\u548C\\u5F15\\u7528\\u8DF3\\u8F6C\\uFF0C\\u7F3A\\u5C11\\u4E86\\u8FD9\\u4E2A\\u529F\\u80FD\\uFF0C\\u90A3\\u4E48\\u548C\\u6700\\u7B80\\u5355\\u7684\\u8BB0\\u4E8B\\u672C\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\u3002\\u53EF\\u662F monaco-editor \\u4F5C\\u4E3A\\u4E00\\u4E2A\\u6CA1\\u6709\\u6587\\u4EF6\\u7CFB\\u7EDF\\u652F\\u6301\\u7684\\u5DE5\\u5177\\uFF0C\\u80FD\\u505A\\u7684\\u5F88\\u6709\\u9650\\uFF0C\\u6700\\u591A\\u4E5F\\u53EA\\u662F\\u652F\\u6301\\u5185\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"addExtraLib\"), \" \\u7684\\u6982\\u5FF5\\u89E3\\u6790\\u4F9D\\u8D56\\u7684\\u6587\\u4EF6\\u5185\\u5BB9\\u3002\\u4F46\\u662F\\u529F\\u80FD\\u7FB8\\u5F31\\uFF0C\\u800C\\u4E14\\u6CA1\\u529E\\u6CD5\\u6269\\u5C55\\u5230\\u5176\\u4ED6\\u7684\\u8BED\\u8A00\\u4E2D\\u53BB\\u3002\\u4E0D\\u8FC7\\u597D\\u5728\\u8FD9\\u4E2A\\u9886\\u57DF\\u5DF2\\u7ECF\\u6709\\u4E86\\u901A\\u7528\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u4E86\\uFF1A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"LSP\"), \"\\uFF0C\\u8FD9\\u4E2A\\u624D\\u662F\\u4E00\\u4E2A\\u7F16\\u8F91\\u5668\\u6838\\u5FC3\\u7684\\u4E1C\\u897F\\uFF0C\\u8FD9\\u4E2A\\u65F6\\u5019\\u56DE\\u60F3\\u4E4B\\u524D\\u7684\\u8003\\u8651\\u771F\\u7684\\u662F\\u592A\\u5E74\\u8F7B\\u3002 \"), mdx(\"p\", null, \"-> \\u4EC0\\u4E48\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"LSP\"), \" \\u4EE5\\u53CA\\u600E\\u4E48\\u8FDE\\u63A5\\u8BED\\u8A00\\u670D\\u52A1\\uFF0C\\u8BE6\\u7EC6\\u53EF\\u4EE5\\u67E5\\u770B\\u540E\\u9762\\u6587\\u7AE0 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-6\"\n }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u516D\\uFF08LSP \\u652F\\u6301\\uFF09\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u8C03\\u8BD5\\u529F\\u80FD\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"LSP\"), \" \\u7684\\u903B\\u8F91\\u662F\\u76F8\\u540C\\u7684\\uFF0C\\u4E5F\\u662F\\u6709\\u7EDF\\u4E00\\u6807\\u51C6 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"DVA\"), \"\\uFF0C\\u4E0D\\u8FC7\\u8FD9\\u4E2A\\u6682\\u65F6\\u8FD8\\u6CA1\\u6709\\u5B9E\\u73B0\\uFF0C\\u540E\\u7EED\\u5982\\u679C\\u6709\\u673A\\u4F1A\\u8865\\u4E0A\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u5176\\u4ED6\"), mdx(\"p\", null, \"\\u5176\\u4ED6\\u529F\\u80FD\\u5305\\u62EC\\u5BA2\\u6237\\u7AEF\\u7684\\u6280\\u672F\\u67B6\\u6784\\u3001\\u67D0\\u4E2A\\u6280\\u672F\\u6808\\u540E\\u9762\\u518D\\u5355\\u72EC\\u6587\\u7AE0\\u8BB2\\u8BB2\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}